前端路线图

夜间模式

导航

存储 ​

Cookie 是访问者在访问网站后留下的一个信息片段。

客户端可以通过JS读写document.cookie，来操作浏览器存储Cookies中的非HttpOnly内容。

JS不能读取或写入HttpOnly标记的Cookie

js
document.cookie = "name=oeschger"
document.cookie = "favorite_food=tripe"
console.log(document.cookie); // name=oeschger;favorite_food=tripe

JS能够操作cookie的以下标记

  • key、value
  • domain、path
    • 默认当前域名，当前目录路径
    • domain 可以设置主域名，不能设置其他域名、子域名
    • path 可以设置当前路径及往上的路径，不能设置当前路径不可访问的路径
  • expires、max-age
    • expires 设置绝对时间，在指定时刻过期
    • max-age 设置相对时间，在指定时间后过期
  • secure
    • 除localhost外，仅在HTTPS协议下才会传输

服务端可以通过HTTP响应标头Set-Cookie设置、修改Cookie

http
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

除了JS能设置的外，还支持

  • HttpOnly
    • 浏览器会阻止JS读写带有此标记的cookie
  • SameSite
    • Strict：任何跨站请求都不发送此cookie
    • Lax：默认行为。简单请求发送此cookie
    • None：同时配置Secure才生效。在跨站请求中也发送此cookie
      • a.com存的cookie，在b.com调用a.com的接口时，请求会携带a.com的cookie

浏览器使用cookie ​

浏览器会存储 cookie 并在后续向服务器再发起简单请求时，携带并发送到服务器上。

Cookie遵循浏览器同源策略，但还自己的规则：

  • 子域可以访问主域的Cookie，反之不行
  • 子路径可以访问它之前的路径，反之不行

Cookie大小限制：

  • 每个cookie大小上限4KB
  • 每个域名上限50个cookie

localStorage、sessionStorage ​

作用域：同源（location.origin）

区别 ​

  • localStorage在本地永久存储
  • sessionStorage在当前页面关闭后清空

语法 ​

js
localStorage.setItem("myCat", "Tom")
let cat = localStorage.getItem("myCat")
localStorage.removeItem("myCat")
localStorage.clear() // 清空当前源此类型存储内容

sessionStorage语法同上。

键值对总是以字符串的形式存储，存储上限5×1024×1024个UTF-16字符串长度

UTF-16字符串长度：中英文都是1个字符串长度，但部分字符如𠮷占2个字符串长度

IndexedDB ​

浏览器IndexedDB总的最大存储空间是动态的——它取决于硬盘分区大小。 全局限制为可用磁盘空间的 50％。

组限制：即主域限制，每个主域名下所有域名共享大小限制，占全局限制空间的20%，取值范围在 [ 10MB，2GB ]，不超过全局限制。

一般可以使用封装过的npm库。有原生使用需求时，再查看兼容性及API文档。

参考资料 ​