深入客户端储存大比拼-烟雨网

Cookie

1.客户端写Cookie

注意点：

删除cookie,设置cookie的过期时间为过去时间即可
设置多个cookie，需要多次调用document.cookie
修改和删除cookie字段，要保障path和domian值不变，不然就会失败

2.服务端写Cookie

3.会话期cookie

定义：浏览器会话期间的cookie，浏览器关闭以后自动删除
设置会话期cookie：不指定过期时间（Expires）和有效期（Max-Age）即可

4.持久化cookie

定义：持久化cookie的生命周期取决于过期时间（Expires）和有效期（Max-Age）
持久化cookie存储在客户端硬盘中
Max-Age：cookie持久化时间（单位秒），Max-Age:0，可以删除cookie

5.httpOnly

定义：设置为true，可以阻止通过 js 访问cookie。能有效的防止 XSS 攻击
document.cookie无法访问

6.secure

定义：设置为true，cookie只会在 https 环境下传输到服务端。

7.cookie 作用域

cookie 同源和同站区别

同源：协议+端口+域名
同站：有效顶级域名+二级域名，不考虑端口和协议
同站例子：（a.taobao.com/b.taobao.com），(127.0.0.1:8000/127.0.0.1:443)
跨站例子：(a.github.io/b.github.io) ，因为 github.io 属于一个有效的顶级域名

SameSite跨站携带cookie

SameSite必须和Secure同时设置才生效
前端站点和后端接口都为https

请求类型	实例	Strict跨站	Lax跨站	None跨站
链接	<a href=”…”/>	X	√	√
预加载	<link href=”” rel=”prerender”/	X	√	√
get表单	<form method=”GET” action=” />	X	√	√
post表单	<form method=”POST” action=” />	X	X	√
Iframe	<iframe src=””/>	X	X	√
AJAX	<img src=”” />	X	X	√
Image	$.get(“)	X	X	√

8.cookie key和value编解码

为什么要编解码？
- key和value中出现分号，等号等特殊符号，影响我们解析操作
- 写入时需要使用 encodeURIComponent() 编码，
- 读取时使用 decodeURIComponent() 解码

document.cookie = `${encodeURIComponent("用户名")}=${encodeURIComponent("云牧")}`;

//一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

9.检查用户是否禁用cookie

window.navigator.cookieEnabled

10.编写cookie工具库

/**
 *
 * 编码 -方便后续替换编解码方法
 * @param {any} s
 * @returns
 */
function encode(s) {
return encodeURIComponent(s);
}
/**
 *
 * 解码-方便后续替换编解码方法
 * @param {any} s
 * @returns
 */
function decode(s) {
return decodeURIComponent(s);
}

/**
 *
 * 获取cookie
 * @param {any} key
 * @returns
 */
function getCookieItem(key) {
let result = key ? undefined : {},
cookies = document.cookie ? document.cookie.split("; ") : [],
i = 0,
l = cookies.length;
for (; i < l; i++) {
let parts = cookies[i].split("="),
//取第一个等号前面的作为key
name = decode(parts.shift()),
cookie = parts.join("=");

if (key === name) {
result = decode(cookie);
break;
}

if (!key && cookie !== undefined) {
//key 未定义，返回全部的key和value对象
result[name] = decode(cookie);
}
}
return result;
}

/**
 *
 * 设置cookie
 * @param {any} key
 * @param {any} value
 * @param {any} [options={}]
 * @returns
 */
function setCookieItem(key, value, options = {}) {
if (!key) return false;
console.log(options);

let sExpires = "";
if (options.expires) {
switch (options.expires.constructor) {
case Number:
sExpires =
options.expires === Infinity
? "; expires=Fri, 31 Dec 9999 23:59:59 GMT"
: "; max-age=" + options.expires;
break;
case String:
sExpires = "; expires=" + options.expires;
break;
case Date:
sExpires = "; expires=" + options.expires.toUTCString();
break;
}
}

window.document.cookie = [
encode(key),
"=",
encode(value),
sExpires,
options.path ? "; path=" + options.path : "",
options.domain ? "; domain=" + options.domain : "",
options.secure ? "; secure" : "",
].join("");
return true;
}

/**
 *
 * 移除单个cookie字段
 * @param {any} key
 * @param {any} options
 * @returns
 */
function removeCookieItem(key, options) {
setCookieItem(key, "", { ...options, expires: -1 });
return !getCookieItem(key);
}

11.新异步操作CookieAPl-CookieStore

cookieStore例子：

<body>
  <div>
    <button id="btnAdd">添加</button>
    <button id="btnAddFail">添加失败</button>
    <button id="btnDel">删除</button>
    <button id="btnGet">获取</button>
    <button id="btnGetAll">获取全部</button>
  </div>
  <script>
    let index = 1;
    btnAdd.onclick = function () {
      const day = 24 * 60 * 60 * 1000;
      cookieStore
        .set({
        name: `cookie-${index}`,
        value: `cookie-${index}-value`,
        expires: Date.now() + day,
      })
        .then(
        function () {
          console.log("add cookie success");
        },
        function (reason) {
          console.error("add cookie failed: ", reason);
        }
      );
      index++;
    };
    btnAddFail.onclick = function () {
      const day = 24 * 60 * 60 * 1000;
      cookieStore
        .set({
        name: `cookie-1`,
        value: `cookie-1-value`,
        expires: Date.now() + day,
        domain: "test.com",
      })
        .then(
        function () {
          console.log("add cookie success");
        },
        function (reason) {
          console.error("add cookie failed: ", reason);
        }
      );
    };

    btnDel.onclick = function () {
      cookieStore.delete("cookie-1").then(
        function () {
          console.log("delete cookie success");
        },
        function (reason) {
          console.error("delete cookie failed: ", reason);
        }
      );
    };

    btnGet.onclick = function () {
      cookieStore.get({ name: "cookie-1" }).then(
        function (res) {
          console.log("get cookie success:", res);
        },
        function (reason) {
          console.error("get cookie failed: ", reason);
        }
      );
    };

    btnGetAll.onclick = function () {
      cookieStore.getAll().then(
        function (res) {
          console.log("getAll cookie success:", res);
        },
        function (reason) {
          console.error("getAll cookie failed: ", reason);
        }
      );
    };

    cookieStore.addEventListener("change", function (ev) {
      // ev.changed 变化的
      // ev.deleted 删除的
      console.log("cookieStorage change:", ev.changed, ev.deleted);
    });
  </script>
</body>

CookieStore – service worker中使用

<body>
  <div>
    <button id="btnAdd">添加或更改</button>
    <button id="btnDel">删除</button>
  </div>
  <script>
    let index = 1;
    btnAdd.onclick = function () {
      const day = 24 * 60 * 60 * 1000;
      cookieStore
        .set({
        name: `cookie-x`,
        value: `cookie-x-${index}`,
        expires: Date.now() + day,
      })
        .then(
        function () {
          console.log("add cookie success");
        },
        function (reason) {
          console.error("add cookie failed: ", reason);
        }
      );
      index++;
    };
    btnDel.onclick = function () {
      cookieStore.delete("cookie-x").then(
        function () {
          console.log("delete cookie success");
        },
        function (reason) {
          console.error("delete cookie failed: ", reason);
        }
      );
    };
  </script>
  <script>
    navigator.serviceWorker
      .register("./sw.js", {})
      .then(function (registration) {
      registration.addEventListener("updatefound", function () {
        var installingWorker = registration.installing;
        console.log(
          "A new service worker is being installed:",
          installingWorker
        );
      });
    })
      .catch(function (error) {
      console.log("Service worker registration failed:", error);
    });
  </script>
</body>

sw.js

self.addEventListener("install", async (event) => {
console.log("service worker is installed");
const subscriptions = await self.registration.cookies.getSubscriptions();
await self.registration.cookies.unsubscribe(subscriptions);

await self.registration.cookies.subscribe([
{
name: "cookie-x",
},
]);
});

// 监听变化
self.addEventListener("cookiechange", (ev) => {
console.log("service worker cookiechange:", ev.changed, ev.deleted);
});

console.log("service worker !!!!");

注意事项

安全上下文中可用，比如https，localhost等
返回的都是Promise
Firefox 和 Safari 不支持

WebStorge

sessionStorage VS localStorage

sessionStorage 为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）
localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在
session Storage和localStorage一般统称为WebStorage

相同点

都遵循同源策略
容量一样

注意事项

是同步APl，阻塞，如果存单个键或者值太大，影响体验
存储的是字符串，要保存对象的时候，需要转为字符串，通常使用JSON.stringify

<body>
  <button type="button" id="btnAdd">添加</button>
  <button type="button" id="btnGet">取值</button>
  <script>
    const str = Array.from({ length: 5 * 1024 * 1023 }, (_) => "云牧").join("");
    const arr = Array.from({ length: 5.12 * 1024 * 33 }, (v, index) => ({
name: "name" + index,
age: ~~(Math.random() * 100),
}));
    btnAdd.onclick = function () {
      console.time(`存长度${str.length}`);
      // localStorage.setItem("_", str);
      localStorage.setItem("_", JSON.stringify(arr));
      console.timeEnd(`存长度${str.length}`);
    };
    btnGet.onclick = function () {
      console.time(`取长度${str.length}`);
      localStorage.getItem("_");
      console.timeEnd(`取长度${str.length}`);
    };
  </script>
</body>

打印结果如下:

sessionStroage是共享的吗？

新标签打开一个页面窗口时会复制顶级浏览会话的上下文作为新会话的上下文
打开多个相同的 URL的 Tabs 页面，会创建各自的 session Storage
89版本后，通过a标签target=” blank”跳转到新页面时，sessionStorage就会丢失，但a标签添加属性 rel=”opener” 能够复制，仅仅能复制，之后的更改并不会同步！

StorageEvent

当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件
事件在同一个域下的不同页面之间触发，即在A页面注册了 storge 的监听处理，只有在跟A同域名下的B页面操作 storage 对象，A页面才会被触发 storage 事件．B页面本身不会触发事件。

注意：sessionStorage 能触发 StorageEvent 事件吗？

a标签打开：不触发
irame嵌套：触发

window.addEventListener("storage", function (e) {
  // 通过e.storageArea分辨是否是sessionStorage触发的storage事件
  if (e.storageArea === sessionStorage) {
    
  }
});

localStorage支持过期

简单的实现

添加一个属性，记住过期的时间
添加数据的时候，一起保存
查询数据，比对事件，过期删除

<div>
  <button type="button" id="btnSetItem">添加</button>
  <button type="button" id="btnGetItem">查询</button>
</div>

<body>
  <script>
    const myLocalStore = {
      setItem: (key, value, expire) => {
        const lsValue = JSON.parse(localStorage.getItem(key) || "{}");
        localStorage.setItem(
          key,
          JSON.stringify({
            ...lsValue,
            value,
            expire,
          })
        );
      },
      getItem: (key) => {
        // 在取值之前先判断是否过期
        const lsValue = JSON.parse(localStorage.getItem(key) || "{}");
        if (lsValue.expire && lsValue.expire >= Date.now()) {
          return lsValue.value;
        } else {
          localStorage.removeItem(key);
          return null;
        }
      },
    };
  </script>

  <script>
    btnSetItem.onclick = function () {
      myLocalStore.setItem("key-x", "value-1", Date.now() + 10000);
    };
    btnGetItem.onclick = function () {
      console.log("getItem:", myLocalStore.getItem("key-x"));
    };
  </script>
</body>

第三方库

web-storage-cache

localStorage存储加密

简单加密

URL方式：encodeURIComponent + decodeURIComponent
base64：window.btoa + window.atob

复杂加密

Web Crypto API的 SubtleCrypto 接口提供了许多底层加密功能。

<style>
  * {
    font-size: 28px;
  }

  .flex {
    display: flex;
  }

  .side {
    flex: 0 0 50%;
  }

  textarea {
    min-height: 400px;
    min-width: 400px;
  }
</style>
</head>

<body>
  <div class="flex">
    <div class="side">
      <div>加密前内容</div>
      <div>
        <textarea id="textAreaClearText"></textarea>
      </div>
    </div>
    <div>
      <div>加密后内容</div>
      <div>
        <textarea id="textAreaCipherText"></textarea>
      </div>
    </div>
  </div>

  <div>
    <button type="button" id="btnEncrypt">加密</button>
    <button type="button" id="btnDecrypt">解密</button>
  </div>

  <script>
    let publicKey;
    let privateKey;

    let arrayBuffer;
    (async function init() {
      // 生成私钥(privateKey)和公钥(publicKey)
      // 加密用公钥， 解密用私钥
      const keyPair = await crypto.subtle.generateKey(
        {
          name: "RSA-OAEP",
          modulusLength: 2048,
          publicExponent: new Uint8Array([1, 0, 1]),
          hash: "SHA-256",
        },
        true,
        ["encrypt", "decrypt"]
      );
      publicKey = keyPair.publicKey;
      privateKey = keyPair.privateKey;
    })();

    /**
 * 返回ArrayBuffer
 */
    function encrypt(text, publicKey) {
      // 字符串转为TypedArray
      const clearText = new TextEncoder().encode(text);
      return window.crypto.subtle.encrypt(
        {
          name: "RSA-OAEP",
        },
        publicKey,
        // an ArrayBuffer, or a TypedArray
        clearText
      );
    }

    /**
 *  cipherText: ArrayBuffer
 *
 */
    async function decrypt(cipherText, privateKey) {
      // cipherText 是ArrayBuffer
      let decrypted = await window.crypto.subtle.decrypt(
        {
          name: "RSA-OAEP",
        },
        privateKey,
        cipherText
      );
      const dec = new TextDecoder();
      return dec.decode(decrypted);
    }

    btnEncrypt.onclick = async () => {
      const text = textAreaClearText.value;
      arrayBuffer = await encrypt(text, publicKey);

      // ArrayBuffer转为字符串
      const dec = new TextDecoder();
      textAreaCipherText.value = dec.decode(arrayBuffer);
      console.log("arrayBuffer:", arrayBuffer);
    };

    btnDecrypt.onclick = async () => {
      const text = await decrypt(arrayBuffer, privateKey);
      textAreaClearText.value = text;
    };
  </script>
</body>

使用加密库

crypto-js
secure-Is
localstorage-slim

webStorage的存储空间

localStorage 存储的键值采用什么字符编码？
答案：UTF-16
UTF-16，每个字符使用两个字节，是有前提条件的，就是码点小于OXFFFF（65535），大于这个码点的是四个字节

5M单位是什么

有几个选项

字符的个数
字节数
字符的长度值
bit数
utf-16编码单元

答案是3和5

字符的个数并不等于字符的长度

2个字节作为一个 utf-16 的字符编码单元，也可以说是 5M 的 utf-16 编码单元

注意：localStorage 键占存储空间

<body>
  <button type="button" id="btnSave">保存</button>
  <script>
    btnSave.onclick = function () {
      const charTxt = "a";
      let count = 2.5 * 1024 * 1024;
      let content = Array.from({ length: count }, (_) => charTxt).join("");
      const key = Array.from({ length: count }, (_) => charTxt).join("");
      localStorage.clear();
      try {
        console.time("setItem");
        // 此时如果再多设置一位字符就会报错
        localStorage.setItem(key, content);
        console.timeEnd("setItem");
      } catch (err) {
        console.log("err code:", err.code);
        console.log("err message:", err.message);
      }
    };
  </script>
</body>

indexedDB

一个事务型数据库系统
- 保持操作同步的成功，比如多窗口操作时数据保持同步
一个基于 JavaScript 的面向对象数据库
支持索引
可以存储结构化克隆算法支持的任何对象

不能被结构化克隆算法复制的数据

Error 以及 Function 对象
DOM 节点
属性描述符， setters 以及 getters
原形链上的属性

indexedDB特点

遵循同源策略
存储空间，配额很大
支持直接存储二进制内容

基本操作流程

打开数据库
在数据库中创建/对开一个对象仓库
启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等
通过监听事件以等待操作完成
继续后续的操作

<body>
  <div>
    <button id="btnAdd">添加数据</button>
    <button id="btnQuery">查询数据</button>
  </div>
  <script>
    // https://github.com/mdn/indexeddb-examples/blob/master/idbkeyrange/scripts/main.js
    var db;
    var things = [
      { fThing: "Drum kit", fRating: 10 },
      { fThing: "Family", fRating: 10 },
      { fThing: "Batman", fRating: 9 },
      { fThing: "Brass eye", fRating: 9 },
      { fThing: "The web", fRating: 9 },
      { fThing: "Mozilla", fRating: 9 },
      { fThing: "Firefox OS", fRating: 9 },
      { fThing: "Curry", fRating: 9 },
      { fThing: "Paneer cheese", fRating: 8 },
      { fThing: "Mexican food", fRating: 8 },
      { fThing: "Chocolate", fRating: 7 },
      { fThing: "Heavy metal", fRating: 10 },
      { fThing: "Monty Python", fRating: 8 },
      { fThing: "Aphex Twin", fRating: 8 },
      { fThing: "Gaming", fRating: 7 },
      { fThing: "Frank Zappa", fRating: 9 },
      { fThing: "Open minds", fRating: 10 },
      { fThing: "Hugs", fRating: 9 },
      { fThing: "Ale", fRating: 9 },
      { fThing: "Christmas", fRating: 8 },
    ];

    // 插入数据
    function insertData() {
      // 事务
      var transaction = db.transaction(["fThings"], "readwrite");
      // 对象库
      var objectStore = transaction.objectStore("fThings");
      // 添加数据
      for (i = 0; i < things.length; i++) {
        var request = objectStore.put(things[i]);
      }
      // 成功的回调
      transaction.oncomplete = function () {
        console.log("insert data success");
      };
    }

    // 我们先打开一个数据库, window.indexedDB(IDBFactory)
    const openRequest = window.indexedDB.open("fThings", 1);
    // 升级的时候创建对象库和对应的索引
    openRequest.onupgradeneeded = function (event) {
      var db = event.target.result;
      db.onerror = function (event) {
        console.log("Error loading database");
      };
      var objectStore = db.createObjectStore("fThings", {
        keyPath: "fThing",
      });
      objectStore.createIndex("fRating", "fRating", { unique: false });
    };

    openRequest.onerror = function (event) {
      console.log("open error:", event);
    };

    openRequest.onsuccess = function (event) {
      console.log("open success");
      // 获得database
      db = event.target.result;
    };

    btnQuery.onclick = function () {
      // 事务
      const transaction = db.transaction(["fThings"], "readonly");
      // 对象库
      const objectStore = transaction.objectStore("fThings");
      // 键
      const keyRangeValue = IDBKeyRange.bound("A", "F");
      // 游标
      objectStore.openCursor(keyRangeValue).onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
          console.log("value:", cursor.value);
          cursor.continue();
        } else {
          console.log("Entries all displayed.");
        }
      };
    };

    btnAdd.onclick = insertData;
  </script>
</body>

使用场景

缓存数据，比如游戏数据
缓存图片，脚本，json文件等等静态资源
service worker的第三方库，就有利用到indexedDB

第三方库

localForage（常用）

localForage 是一个 Java Script 库，通过简单类似 localStorageAPI 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串
localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage
localForage 提供回调 API 同时也支持 ES6 Promises API 自行选择

<script src="./localforage.min.js"></script>
<script>
  localforage.config({
    // 指定存储媒介， localStorage, web sql, localStorage
    driver: localforage.INDEXEDDB,
    // 数据库名
    name: "myApp",
    // 版本
    version: 1.0,
    // 配额
    size: 4980736,
    // 对象库名
    storeName: "keyvaluepairs",
    description: "some description",
  });

  // 实例1
  var store = localforage.createInstance({
    name: "nameHere",
  });

  // 实例2
  var store2 = localforage.createInstance({
    name: "otherName",
  });

  (async function () {
    // 实例1存和取
    await store.setItem("key-1", "value-1", console.log);
    const storeValue1 = await store.getItem("key-1");
    console.log("store key-1:", storeValue1);
    // 实例2存和取
    await store2.setItem("key-1", "value-1", console.log);
    const store2Value1 = await store.getItem("key-1");
    console.log("store2 key-1:", storeValue1);

    // 纯二进制
    store.setItem("key-2", new Blob(["sdsd"]));
  })();
</script>

dexie.js

解决了原生 indexdb API 的三个主要问题
- 不明确的错误处理
- 糟糕的查询
- 代码复杂性

<script type="module">
  import Dexie from "./dexie.min.mjs";
  // 实例化
  const db = new Dexie("FriendDatabase");
  db.version(1).stores({
    friends: "++id,name,age",
  });

  try {
    // 添加
    await db.friends.add({ name: "Josephine", age: 21 });
    // 查询
    const youngFriends = await db.friends.where("age").below(25).toArray();
    console.log(`My young friends: ${JSON.stringify(youngFriends)}`);
  } catch (e) {
    console.log(`Error: ${e}`);
  }
</script>

ZangoDBs

一个类 MongoDB 的 IndexedDB 接口实现，提供了诸如过滤、投影、排序、更新和聚合等大多数 MongoDB 常见的特性

<script src="./zangodb.min.js"></script>
<script>
  let db = new zango.Db('mydb', { people: ['age'] });
  let people = db.collection('people');

  let docs = [
    { name: 'Frank', age: 20 },
    { name: 'Thomas', age: 33 },
    { name: 'Todd', age: 33 },
    { name: 'John', age: 28 },
    { name: 'Peter', age: 33 },
    { name: 'George', age: 28 }
  ];

  people.insert(docs).then(() => {
    return people.find({
      name: { $ne: 'John' },
      age: { $gt: 20 }
    }).group({
      _id: { age: '$age' },
      count: { $sum: 1 }
    }).project({
      _id: 0,
      age: '$_id.age'
    }).sort({
      age: -1
    }).forEach(doc => console.log('doc:', doc));
  }).catch(error => console.error(error));
</script>

JsStore

一个具备类 SQL 语法的简单和先进的 IndexedDB 封装实现。

<script src="./jsstore.min.js"></script>
<script src="./jsstore.worker.js"></script>
<script>
  // 定义数据结构
  function getDbSchema() {
    var table = {
      name: "Student",
      columns: {
        id: {
          primaryKey: true,
          autoIncrement: true,
        },
        name: {
          notNull: true,
          dataType: "string",
        },
        gender: {
          dataType: "number",
          default: "male",
        },
        country: {
          notNull: true,
          dataType: "string",
        },
        city: {
          dataType: "string",
          notNull: true,
        },
      },
    };

    var db = {
      name: "My-Db",
      tables: [table],
    };
    return db;
  }
  // 实例化
  var jsstoreCon = new JsStore.Connection();

  async function initDb() {
    // 创建数据库
    var isDbCreated = await jsstoreCon.initDb(getDbSchema());
    if (isDbCreated) {
      console.log("db created");
    } else {
      console.log("db opened");
    }
    // 添加
    await addStudent();
    // 查询
    var students = await jsstoreCon.select({
      from: "Student",
    });

    console.log("students", students);
  }

  async function addStudent() {
    try {
      var noOfDataInserted = await jsstoreCon.insert({
        into: "Student",
        values: [
          {
            name: "小名",
            gender: 1,
            country: "北京",
            city: "北京",
          },
          {
            name: "小红",
            gender: 0,
            country: "新疆",
            city: "乌鲁木齐",
          },
        ],
      });
    } catch (ex) {
      console.log("addStudent error:", ex.message);
    }
  }

  initDb();
</script>

客户端存储空间大比拼

准备好一个工具函数查询当前存储字节

const sizeofUtfBytes = function (str, charset) {
var total = 0,
charCode,
i,
len;
charset = charset ? charset.toLowerCase() : "";
if (charset === "utf-16" || charset === "utf16") {
for (i = 0, len = str.length; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode <= 0xffff) {
total += 2;
} else {
total += 4;
}
}
} else {
for (i = 0, len = str.length; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode <= 0x007f) {
total += 1;
} else if (charCode <= 0x07ff) {
total += 2;
} else if (charCode <= 0xffff) {
total += 3;
} else {
total += 4;
}
}
}
return total;
};

Cookie

最新版浏览器100个左右的存储数量也完全不在话下

<body>
  cookie存储个数
  <script>
    // utf-8 a:一个字节， 人：三个字节
    const charTxt = "a";
    let count = 4 * 1024 - 6;
    console.log(count);
    let content = new Array(parseInt(count)).fill(charTxt).join("");
    const key = "人";

    for (let i = 0; i < 100; i++) {
      try {
        console.log("key==", `${key}_${i}`);
        document.cookie = `${key}_${i}=${content}; path=/`;
      } catch (err) {
        console.log("err", err);
      }
    }
  </script>
</body>

localStorage

<button id="lBtn">localStorage 存储</button>
<script>
  lBtn.onclick = function () {
    const charTxt = "人";
    let count = (10 * 1024 * 1024) / 2 - 8 / 2;
    let content = new Array(count).fill(charTxt).join("");
    const key = "aa🔴";
    const key1 = "bb🔴";
    localStorage.clear();
    try {
      localStorage.setItem(key, content);
      //测试存储是否与数量有关。
      localStorage.setItem(key1, content);
    } catch (err) {
      // err.code为22
      console.log("err", err.code, err);
    }
    const sizeKey = sizeofUtfBytes(key, "utf16");
    const contentSize = sizeofUtfBytes(content, "utf16");
    console.log("key size:", sizeKey, content.length);
    console.log("content size:", contentSize, content.length);
    console.log(
      "total size:",
      sizeKey + contentSize,
      content.length + key.length
    );
  };
</script>

sessionStorage

indexdDB

Cache API 与 Service worker

FileSystem（非标准）

<body>
  <button id="saveFile">存储文件</button>
  <script>
    //1.获取fileSystem 对象
    window.requestFileSystem =
      window.requestFilsSystem || window.webkitRequestFileSystem;

    saveFile.onclick = function () {
      // 2.申请空间大小
      window.requestFileSystem(
        Window.TEMPORARY,
        10 * 1024 * 1024,
        (fs) => {
          //3.创建文件
          fs.root.getFile(
            "test1.txt",
            { create: true, exclusive: false },
            (fileEntry) => {
              //打印创建好的文件访问URL
              console.log(fileEntry.toURL());
              //4. 创建一个写入对象
              fileEntry.createWriter((fileWriter) => {
                //注册书写成功监听
                fileWriter.onwriteend = function (e) {
                  console.log("书写成功");
                };
                fileWriter.onerror = function (e) {
                  console.log("书写失败 " + e.toString());
                };
                var blob = new Blob(
                  ["测试测试~"],
                  { type: "text/plain" }
                );
                //5. 写入内容
                fileWriter.write(blob);
              });
            },
            (e) => {
              console.log("eee", e);
            }
          );
        },
        (err) => {
          console.log("file error");
        }
      );
    };
  </script>
</body>

总结

特性	cookie	localStorage	sessionStorage	indexedDB
数据声明周期	一般由服务器生成，可设置过期时间	一直存在，需手动清理	浏览器关闭清理	一直存在，需手动清理
数据储存大小	单个Cookie大小4K字节，可存储多个	10M字节( 5M UTF-16编码单元）	10M字节( 5M UTF-16编码单元）	几十G甚至更多
数据获取方式	同步	同步	同步	异步，支持事务
与服务器通讯	会携带在请求header中	不参与	不参与	不参与
作用域	同站	同源	同源（有限定窗口）	同源
存储类型	字符串	字符串	字符串	字符串，二进制