【JavaScript】前端存储 —— cookie、sessionStorage、localStorage

一、概念及作用

1. cookie

在浏览某些网站时，这些网站会把一些数据存在客户端，用于使用网站等跟踪用户、实现用户自定义功能等；cookie 可以设置过期时间，当超过时间期限后，cookie 就会自动消失。

2. sessionStorage

sessionStorage 是存放在服务器端的 Storage 类型的一个对象，用于存放用户的数据，实现网页之间数据传递，会在一定时间内保存在服务器上；sessionStorage 为临时保存。

3. localStorage

localStorage 也是 Storage 类型的一个对象，但数据保存在客户端本地； localStorage 为永久保存。

二、共同点

三者都是保存在浏览器端，并且都是同源的。

注意：需要注意的是可以在浏览器控制台直接访问它们，所以不应该该存入敏感数据。

三、区别

1. cookie

cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 seesionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以显示 cookie 只属于某个路径下，存储容量很小，只有4K。

2. sessionStorage

sessionStorage 仅在当前浏览器窗口关闭前有效，浏览器窗口关闭后就被清除了，存储容量可达5M。

需要注意的是即使在同一个浏览器窗口中，同一个域名下，在不同的标签页 sessionStorage 也不会共享，但是在标签页A打开一个新的标签页B时，会把当前标签页A的 sessionStorage 完全复制一份携带到新的标签页B中，此后标签页A和标签页B中的 sessionStorage 就是完全隔离的。

3. localStorage

localStorage 在所有同源窗口中都是共享的，且如果未被清除会一直存在，存储容量可达5M。

总结：

	cookie	sessionStorage	localStorage
大小	4K	5M	5M
有效期	默认浏览器关闭即被清除，可自定义设置有效时间	浏览器窗口关闭即被清除	永久保存，除非手动清除
作用域	在所有的同源窗口中共享	仅在当前浏览器窗口有效	在所有的同源窗口中共享

四、用法

1. cookie

   // 在vue 项目中可以使用 js-cookie 插件存取 cookie ，非常方便
   import cookies from 'js-cookie'
   
   // 存储
   cookies.set('token', 'token')
   
   // 取值
   cookies.get('token')
   
   // 删除
    cookies.remove('token')
   
   

   // 原生 js 方式
   
   // 存储
   // 创建 cookie
   document.cookie="name=zhangsan"
   // 可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间），默认情况 cookie 在浏览器关闭时删除
   document.cookie="name=zhangsan; expires=Thu, 18 Dec 2043 12:00:00 GMT"
   // 可以使用 path 参数告诉浏览器 cookie 的路径，默认情况下，cookie 属于当前页面
   document.cookie="name=zhangsan; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"
   
   // 取值
   var x = document.cookie
   
   // 清除
   //删除 cookie 非常简单。只需要设置 expires 参数为以前的时间即可
   document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
   

2. sessionStorage

   // 存储
   sessionStorage.setItem('name', '张三')
   // 存储一个对象
   sessionStorage.setItem('name', JSON.stringify(obj))
   
   // 取值
   sessionStorage.getItem('name')
   // 取出一个对象的值
   let obj = JSON.parse(sessionStorage.getItem('name'))
   
   // 删除一条数据
   sessionStorage.removeItem('name')
   // 清除所有数据
   sessionStorage.clear()
   

3. localStorage

   localStorage 的存值取值方式与 sessionStorage 相同。

   //  存储
   localStorage.setItem('name', '张三')
   // 存储一个对象
   localStorage.setItem('name', JSON.stringify(obj))
   
   //  取值
   localStorage.getItem('name')
   // 取出一个对象的值
   let obj = JSON.parse(localStorage.getItem('name'))
   
   // 删除一条数据
   localStorage.removeItem('name')
   // 清除所有数据
   localStorage.clear()