初窥浏览器数据存储 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL

随着··· ···,废话就不多铺垫了,直接进入主题吧。浏览器有存储数据的需求,这两天查了下相关文档,重点学习了下。以谷歌浏览器 F12 调出控制台,主要有 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL 几种方案,下面逐一简单说下。

Cookie

最早用于 HTTP 状态管理机制,Cookie 通常在 Web 应用程序中用于识别用户及其身份验证的会话,兼容性好。Cookie 是一段不超过 4KB 的小型文本数据,由一个名称(Name)、一个值(Value)和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。客户端发起请求时请求头会附带 Cookie 信息,过多的 Cookie 设置会影响请求效率。

常用方法:

  • document.cookie;
  • document.cookie = ‘key=value’;

Cookie 的原生 API 不友好,需要自行封装一下。Vue 推荐使用 vue-cookies 插件:

  • import Vue from ‘vue’
  • import VueCookies from ‘vue-cookies’
  • Vue.use(VueCookies)
  • $cookies.config(expireTimes, path)
  • $cookies.set(key, value[, expireTimes[, path[, domain[, secure]]]])
  • $cookies.get(key)
  • $cookies.remove(key [, path [, domain]])
  • $cookies.isKey(key)
  • $cookies.keys()

参考文档:

Web Storage

传统的 Cookie 方式存储数据有诸多限制(数量、大小),然而随着 Web 应用的发展,客户端存储的需求越来越多,为此 HTML5 提出了 Web Storage 的解决方案, Web Storage 包含 Local Storage 及 Session Storage 两种存储机制。

Local Storage

Local Storage 永久保留数据,直至手动清除。每个数据源的最大限制为5 MB。

常用方法:

  • localStorage.length
  • localStorage.setItem(keyName, keyValue);
  • localStorage.getItem(keyName);
  • localStorage.removeItem(keyName);
  • localStorage.key(index);
  • localStorage.clear();
Session Storage

Session Storage 浏览器关闭,结束当前会话后自动清除。每个数据源的最大限制为5 MB。

常用方法:

  • sessionStorage.length
  • sessionStorage.setItem(keyName, keyValue);
  • sessionStorage.getItem(keyName);
  • sessionStorage.removeItem(keyName);
  • sessionStorage.key(index);
  • sessionStorage.clear();

参考文档:

IndexedDB

IndexedDB 类似浏览器的本地数据库,允许储存大量数据,提供查找接口,还能建立索引。

常用方法:

  • indexedDB.open(databaseName, version);  打开指定版本的数据库
  • IDBEnvironment:提供对IndexedDB功能的访问。它由window和worker对象实现。该接口不是2.0规范的一部分。
  • IDBFactory:提供对数据库的访问。这是由全局对象实现的接口indexedDB ,因此是API的入口点。
  • IDBOpenDBRequest:表示打开数据库的请求。
  • IDBDatabase:表示与数据库的连接。这是在数据库上进行事务处理的唯一方法。
  • IDBTransaction:代表交易。您在数据库上创建事务,指定范围(例如要访问的对象存储),并确定所需的访问类型(只读或读写)。
  • IDBRequest:通用接口,用于处理数据库请求并提供对结果的访问。
  • IDBObjectStore:表示一个对象存储,该对象存储允许访问通过主键查找的IndexedDB数据库中的一组数据。
  • IDBIndex:还允许访问IndexedDB数据库中的数据子集,但使用索引来检索记录而不是主键。有时这比使用快IDBObjectStore。
  • IDBCursor:遍历对象存储和索引。
  • IDBCursorWithValue:遍历对象存储和索引,并返回游标的当前值。
  • IDBKeyRange:定义键范围,该键范围可用于从特定范围的数据库中检索数据。

参考文档:

Web SQL

Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

这是··· ···,弃坑了。

参考文档:

十月 3

历史上的今天

未经允许不得转载

文章标题:蝈蝈要安静 » 初窥浏览器数据存储 Cookie、Local Storage、Session Storage、IndexedDB、Web SQL

原文链接:https://blog.quietguoguo.com/4055.html

发布信息:文章由【蝈蝈要安静】于<2020-10-03>发布于【网站建设】分类下

相关标签:|||||

相关推荐

评论 抢沙发

  • 昵称(必填)
  • 邮箱(必填)
  • QQ(选填)
  • 网址(选填)