往期回顾
Cookie
单个cookie的大小一般为4k，4k在这里指什么呢？
答：4096 个字节。
<body>
cookie 存储
<script src="./utils.js"></script>
<script>
// utf-8中， 字母 “a” 是1个字节大小，汉字 “人” 是3个字节大小
const charTxt = "a";
let count = (4 * 1024 - 1);
console.log(count);
let content = new Array(parseInt(count)).fill(charTxt).join("")
const key ="a"; // 如果将key设置为 人， 则上文中的 count需 -3
try {
document.cookie = `${key}=${content};`
} catch (err) {
console.log("err",err);
}
// sizeofUtfBytes 是用来计算当前存储的字节大小的方法
const contentSize = sizeofUtfBytes(content);
const keySize = sizeofUtfBytes(key);
console.log("contentSize size:", contentSize);
console.log("key size:", keySize);
console.log("total size:", contentSize + keySize);
</script>
</body>
cookie 的存储个数
一般来说cookie可以存储20-30个数据，但是在最新版的谷歌浏览器中，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>
loaclStorage
在文章搞定Web Storage中说到web Storage可以存储5M的utf-16的编码单元，一个编码单元是两个字节，也就是10M字节。
cookie中一个key最多应存储4096字节，而loaclStorage是在一个同源站中总共能存10M字节，注意二者所对比的维度不同。
<body>
<button id="lBtn">localStorage 存储</button>
<script src="./utils.js"></script>
<script>
lBtn.onclick = function () {
const charTxt = "人";
let count = (10 * 1024 * 1024) / 2 - 4 / 2; //aa和bb加起来大小肯定是超10M字节的
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>
</body>
sessionStorage
sessionStorage 的特性与 loaclStorage 大差不差，格外要注意的一点是 sessionStorage 的同源策略和打开的窗口也有一定的关系，具体分析在搞定Web Storage的“sessionStroage 是共享的吗？”问题中有详细讲解。
IndexDB
- 具有最大空间的灵活数据存储
- 强大的事务、索引和搜索选项
- 良好的浏览器支持
IndexDB 数据支持异步操作，可以自行封装 Promise ，在 indexedDB的精华和使用 一文中也推荐了四个库可供使用，操作简单便捷。
Cache API 与 Service worker
Cache API 为 HTTP 请求和响应对象对提供存储。可以创建任意数量的命名缓存来存储任意数量的网络数据项。
API 通常对缓存渐进式 web应用进行网络响应。当设备与网络断开连接时，重新提供缓存内容，以便web应用程序可以脱机运行。
优点
- 存储任何网络响应
- 可以提高web应用程序性能
- 允许web应用程序脱机运行（离线）
- 基于Promise的现代API
缺点
- 不适用于存储应用程序状态
- 在渐进式web应用程序之外不太有用
- 苹果对PWAs和Cache API并不友好
Cache API是存储从网络检索的文件和数据的最佳选择。我们可以使用它来存储应用程序状态。
FileSystem（非标准）
FileSystem 是谷歌浏览器内核用来让web站点或app获得通过沙箱访问文件系统。
这个 API 没有 W3C 或者 WHATWG 的官方规范。
小示例： 以上代码建议大家复制出来，在本地运行进行调试，效果会更好喔👀
功能很强大，但是兼容性不是很好
总结
| 特性 | cookie | localStorage | sessionStorage | indexedDB |
|---|---|---|---|---|
| 数据声明周期 | 一般由服务器生成，可设置过期时间 | 一直存在，需手动清理 | 浏览器关闭清理 | 一直存在，需手动清理 |
| 数据储存大小 | 单个Cookie大小4K字节，可存储多个 | 10M字节( 5M UTF-16编码单元） | 10M字节( 5M UTF-16编码单元） | 几十G甚至更多 |
| 数据获取方式 | 同步 | 同步 | 同步 | 异步，支持事物 |
| 与服务器通讯 | 会携带在请求header中 | 不参与 | 不参与 | 不参与 |
| 作用域 | 同站 | 同源 | 同源（有限定窗口） | 同源 |
| 存储类型 | 字符串 | 字符串 | 字符串 | 字符串，二进制 |
