导语
最近遇到一个需求需要用到存储,于是又复习了一下相关知识。
参考
详说 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相同**