【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。

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()