前端存储【Cookie&Web Storage】

导语

最近遇到一个需求需要用到存储，于是又复习了一下相关知识。

参考

MDN—Web Storage API

详说 Cookie, LocalStorage 与 SessionStorage

很全很全的前端本地存储讲解

笔记

Cookie

存放限制为4KB左右。 一般由服务器生成，可设置失效时间【max-age属性】。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。（所以在只关闭了标签页的时候，再次打开网页，还是会获得上一次存储的内容噢）

• 每次都会携带在HTTP头中与服务器端通信【 每一次http请求浏览器都会自动帮我们做 】
• 需要程序员自己封装，源生的Cookie接口不友好
• 不同浏览器、不同域的cookie独立
• 一个域名下存放的cookie数一般为20个，不同浏览器不同
• max-age 的默认值是 -1(即有效期为 session )；max-age有三种可能值：负数、0、正数。
  负数：有效期session；
  0：删除cookie；
  正数：有效期为创建时刻+ max-age

sessionStorage

存放限制为5M左右。在页面会话期间（只要打开浏览器，包括页面重新加载和还原），就为每个给定的来源维护一个单独的存储区，该存储区在整个页面会话期间都可用。 【关闭窗口或标签页时删除】

• 相同URL不同窗口有各自的seesionStorage
• 协议不同也有各自的seesionStorage

localStorage

存放限制为5M左右。与seesionStorage做同样的事情，但是即使关闭并重新打开浏览器也仍然存在 。【存储在本地，需要手动删除】

• 协议不同也有各自的localStorage
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

WebStorage时html5标准的内容，需要注意兼容性。“ 如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。 ”

应用

到底用哪一个存储主要依据这几个之间的差别。我的需求是要保留用户查询选项，我并不希望用户在关闭了tab页重新打开时，还留着之前选择的选项，因此我用了sessionStorage。

因为每个 HTTP 请求都会带着 Cookie 的信息，所以在cookie存放的数据应该是轻量级的。应用比较广泛的一个场景是判断用户是否登录。用户第一次登录时会产生一条唯一的加密的标识cookie，之后每次发送请求都会带上这个标识，就可以保存用户的状态了。如果想要保存一些本地数据，比如个人的todolist，就可以用到localStorage了。

API

cookie

客户端设置

document.cookie = '名字=值';
document.cookie = 'username=xxx;domain=xxxx.xxxxx.com'    

//注意： 客户端可以设置cookie 的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项。

在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie。

服务器端

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

// 可以设置上述所说的所以选项，一个set-Cookie字段只能设置一个cookie。

WebStorage

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

// **localStorage相同**