引言：网页刷新，所有数据都会被清除，而想要保留数据，就需要使用本地存储的方式，而前端本地存储的方式有三种，分别是cookie，localStorage和sessionStorage,那它们又是怎么使用的，又有什么区别呢？

一、cookie

1、概念及相关信息：

• 由服务器发送到用户浏览器的一小块数据，并会在下次向同一服务器请求时携带
• 存储位置：被浏览器以txt文件的形式存储在电脑的硬盘中
• 单个cookie大小不超过4k，单个域名最多保存30个cookie
• JS操作cookie：读/写cookie的api是document.cookie
  • 一次只能写入一个cookie，想要写多个，需要操作多次 document.cookie
  • 删除cookie需要将一个已经存在的cookie名字的过期时间设置为过去的时间即可
  • 修改cookie只需要重新赋值，旧值会覆盖新值(新值和旧值的path和domain要一样)

document.cookie = 'yummy_cookie=choco';
document.cookie = 'tasty_cookie=strawberry';
console.log(document.cookie);// "yummy_cookie=choco; tasty_cookie=strawberry"

2、主要作用：

• 1.会话状态的管理：用户登录状态、购物车、游戏数据或者其他需要记录的信息
• 2.个性化设置：用户自定义设置、主题或其他设置
• `3.浏览器行为跟踪，收集用户的点击或查阅等动作

二、localStorage和sessionStorage，特定于页面的协议

• localStorage的数据可以长期保留，需要手动清除
• sessionStorage的数据会因为页面的关闭而被清除，主要用于存储当前会话的数据
• 大小都为5M左右，都有同源策略限制，跨域无法访问
• 数据仅保存在客户端，不会随请求发送到服务器
• 以key和value的形式进行存储，value必须是字符串，不然会转换成字符串，对象会转成json字符串

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data1 = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// -----------------------------------

// 保存数据到 localStorage
localStorage.setItem('key', 'value');
// 从 localStorage 获取数据
let data2 = localStorage.getItem('key');
// 从 localStorage 删除保存的数据
localStorage.removeItem('key');
// 从 localStorage 删除所有保存的数据
localStorage.clear();

主要作用：用来作为会话存储和本地存储来使用的，解决了cookie存储空间不足的问题

三、三者的异同：

1、生命周期：

• cookie：可以设置失效时间，没有设置则关闭浏览器后失效
• localStorage：会一直保存，除非手动清除
• sessionStorage：仅在当前网页会话存在时有效，当前页面关闭就会被清除

2、存放的数据大小：

• cookie：4k;
• localStorage和sessionStorage ：5MB左右

3、请求中是否携带：

• cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
• localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

4、应用场景：

• 安全性：请求中会携带cookie信息，但是会消耗性能，且不能跨域使用，但是对于识别用户登录，cookie会更好用，其他情况使用Storage会更好
• Storage是html5的新特性，有些浏览器并不支持