浏览器存储 的几种方式

浏览器存储

常见的浏览器存储主要有：
1.属于文档对象模型：documentcookie，
2.属于浏览器对象模型 localStorage，sessionStorage，indexDB

一.cookie

h5之前，存储主要用cookie，缺点是请求头上带着数据，
h5之前，存储主要用cookies，缺点是在请求头上带着数据，导致流量增加。大小限制4k。
设置cookie的方式，及可以添加的参数

1.expires（过期时间）
过了过期时间，浏览器就会删除该cookie，想要删除cookie，只需要把它过期时间设置成过去的时间即可
（如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。）

document.cookie = "username=linda; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

2.path（路径）
（值可以是一个目录，或者是一个路径。）

如果cc.com/test/index.html建立了一个cookie，那么在cc.com/test/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在cc.com/test/test2/test3里的任何页面都可以访问cc.com/test/index.html建立的cookie。若cc.com/test/若想访问cc.com/test/index.html设置的cookie，需要把cookie的path属性设置成“/”。
在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享cookies。

3.domain(主机名，是指同一个域下的不同主机)
例如：www.baidu.com和map.baidu.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制：document.cookie = "name=value;domain=.baidu.com"
这样，所有*.baidu.com的主机都可以访问该cookie。
可以用此特性实现

2、localStorage

以键值对(Key-Value)的方式存储，键值对总是以字符串的形式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M。打开同域的新页面也能访问得到。

window.localStorage.setItem('myCat', 'Tom');  // 设置
let cat = window.localStorage.getItem('myCat'); // 读取
window.localStorage.removeItem('myCat');  // 移除
window.localStorage.clear();  // 清空所有
window.localStorage.key(1); // 读取索引为1的值
window.localStorage.length; // 数目

3、sessionStorage

sessionStorage操作的方法与localStorage是一样的，区别在于 sessionStorage 当前页面有效，在关闭页面后即被清空，而 localStorage 除非删除，会一直保存。

注意，刷新页面sessionStorage不会清除，但是打开同域新页面访问不到

4、indexedDB

当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。

IndexedDB 鼓励使用的基本模式如下所示：

• 打开数据库。
• 在数据库中创建一个对象仓库（object store）。
• 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
• 通过监听正确类型的 DOM 事件以等待操作完成。
• 在操作结果上进行一些操作（可以在 request 对象中找到）
  DEMO

const dbName = "demo_db";

//打开我们的数据库,第二个参数为数据库版本号，默认为1
var request = window.indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // 错误处理
};
request.onupgradeneeded = function(event) {
  // 保存 IDBDataBase 接口
  var db = event.target.result;

  //为该数据库创建一个对象仓库
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引
  objectStore.createIndex("name", "name", { unique: false });
  // 使用邮箱建立索引，我们向确保客户的邮箱不会重复，所以我们使用 unique 索引
  objectStore.createIndex("email", "email", { unique: true });

  // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
  objectStore.transaction.oncomplete = function(event) {
    // 将数据保存到新创建的对象仓库
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
      customerObjectStore.add(customer);
    });
};

详细使用方式不在此处详细介绍可详细阅读
https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

注意

不是什么数据都适合放在本地存储中的，因为它们保存在本地容易被篡改，使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。