表格快速对比:
cookie | session | sessionStorage | localStorage | |
存储位置 | 客户端 | 服务端 | 会话存储 | 本地存储 |
安全性 | 明文存放在客户端,安全性低 | 安全高 | ||
生命周期 | 设置有效时间(累积的)默认会话关闭失效 | 设置有效时间(间隔的) | 会话关闭失效 | 一直有效,需手动清除 |
访问范围 | 多个浏览器共享 | 一个浏览器独享 | (同源下)相同标签页打开的多个iframe之间数据共享 | 同源标签页与window窗口下共享 |
用途 | 服务器端生成,用于表示用户身份,一般携带在请求头中 | 通过检查服务器上的“用户明细表”来确认用户身份 | 只存储在当前会话有效 | 长久存储数据 |
存储大小 | 4kb | 无限制 | 5MB | 5MB |
详细介绍:
cookie:存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie,一般情况下,cookie是产生于服务器端,保存于客户端。
但是我们也可以通过js来产生cookie;只针对于服务器,同一个服务器可以共享cookie。存储少量数据,面向服务器的 4kb,通常通过js-cookie这个库来操作cookie(可到Bootcdn下载或者在线引入js-cookie这个库(js-cookie (vlatest) - A simple, lightweight JavaScript API for handling cookies | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务))
Cookie //创建一个cookie,7天后过期
Cookies.set("name","this is a test cookie",{ expires: 7 })
//获取cookie
console.log(Cookie.get('name'));
//移除cookie
Cookies.remove('name')
session:存储于服务器
session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案,客户来访的时候只需要查询客户档案表就可以了。
sessionStorage 会话存储 选项卡 选项卡关闭,会话失效 --写项目推荐使用
页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
打开多个相同的URL的Tabs页面,会创建各自的sessionStorage。
关闭对应浏览器tab,会清除对应的sessionStorage。
sessionStorage 实例方法
// 设置内容
sessionStorage.setItem('name','terry');
// 获取内容
console.log(sessionStorage.getItem('name'));
// 清空内容的属性值
// sessionStorage.clear();
// 清空内容
sessionStorage.removeItem('name')
localStorage 本地存储 存到本地磁盘中,即使浏览器关闭数据依然在。
优势:浏览器的统一标准在5M,不同的浏览器大小会有区别,可在第一次请求的数据(或者长期使用的数据)用localStorage存在本地,此时相当于在本地有了一个5M左右的前台数据库,相比cookie每次请求都带着,节约带宽。
局限:
1.各个浏览器的支持的大小不一样,业界认为是5M,并且在不同的浏览器不同版本支持度不一样。
2.localStorage的存储的数据都是K-V键值对,并且值会被转为String类型,所以有时候会用JSON进行数据转换。
3.localStorage本质上是字符串的读取,存储的数据不可过多,否则消耗会消耗内存空间,导致页面卡顿
4.localStorage的数据不能被爬虫抓取.
// 设置内容
localStorage.setItem('name','larry');
// 获取内容
console.log(localStorage.getItem('name'));
// 清空内容
localStorage.clear()
// 清空内容
// localStorage.removeItem('name')