前端三种缓存 认识与对比

客户端存储方式Storage

1. localStorage

   localStorage可保存内容在5M左右，是永久存储在本地，除非你主动去删除；

   写法：

   localStorage.setItem("key","value");   //localStorage
   var data = localStorage.getItem（"key"）;//获取数据
   localStorage.removeItem("key"); //删除数据
   localStorage.clear(); // 清除所有数据
   

2. sessionStorage

   sessionStorage 关闭当前会话则清除数据【当前会话指：当前浏览器页面】

   写法：

   sessionStorage.setItem("key","value");   //保存数据到sessionStorage
   var data = sessionStorage.getItem（"key"）;//获取数据
   sessionStorage.removeItem("key"); //删除数据
   sessionStorage.clear(); // 清除所有数据
   

3. Cookie

   随着请求发送到服务器, 存储内容较小，在4k左右，一般用于保存用户登录状态，记住密码等，不清除的话会一直存在直到关闭浏览器则清除所有数据，或者可以设置过期时间自动清除；

   写法：

   cookie.setMaxAge(2000); // 设置cookie的生命周期
   document.cookie = token; // 将token保存在cookie中
   var token = document.cookie.split(';')[0] // 从cookie中读取token