一.总体说明[1]
- 共同点:都是保存在浏览器端,并且是同源的 Cookie:cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器 和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器,仅 在本地保存。
- cookie 数据有路径(path)的概念,可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。 (key:可以在浏览器和服务器端来回传递,存储容量 小,只有大约 4K 左右)
- sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持。
- localStorage: 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
- cookie 只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关 闭浏览器后消失,session 为一个回话,当页面不同即使是同一页面打开两次,也被视为 同一次回话)
- localStorage:localStorage 在所有同源窗口中都是共享的;
- cookie 也是在所有同源窗口中 都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与 否都会始终生效)
- 补充说明一下 cookie 的作用: 保存用户登录状态。例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面 时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie 还可以设置 过期时间,当超过时间期限后,cookie 就会自动消失。因此,系统往往可以提示用户保 持登录状态的时间:常见选项有一个月、三个 月、一年等。 跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是烦琐的,当利用了 cookie 后就会显得很人性化了,系统能 够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区 的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使 用 cookie 来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以 保存上一次访问的界面风格。
二.cookie介绍
cookie也被称为“小型文本文件”,可以用于网站辨别用户身份。通过进行Session跟踪来加密存储用户本地终端数据,由计算机客户端保存。[2]
三.sessionStorage,localStorage介绍
他们俩都可以用来存储客户临时信息的对象,sessionStorage.getItem(key):获取指定key本地存储的值;
sessionStorage.setItem(key,value)//:将值存储到key字段;
sessionStorage.removeItem(key)//:删除指定key本地存储的值;
sessionStorage.length是sessionStorage的项目数。[3]
使用 localStorage 创建一个本地存储的 name/value 对,name="lastname" value="Smith", 然后检索 "lastname" 的值,并插入到 id="result" 的元素上:[4]
// 存储 localStorage.setItem("lastname", "Smith");
// 检索 document.getElementById("result").innerHTML = localStorage.getItem("lastname");
参考
[1] Cookie、sessionStorage、localStorage的区别_IT_全世界的屋顶的博客
[2]cookie(储存在用户本地终端上的数据) https://baike.baidu.com/item/cookie/1119?fr=aladdin
[3]sessionStorage含义及用法 https://www.jianshu.com/p/d3b3462dfc5f
[4]Window localStorage 属性 https://www.runoob.com/jsref/prop-win-localstorage.html