JavaScript本地存储_cookie_sessionStorage_localStorage

• JavaScript 中常用的本地缓存方法主要有
  • cookie
  • sessionStorage
  • localStorage

存储优势

名称	生命周期	大小限制	跨域	服务器通信
cookie	一般通过服务器生产，也可以设置失效时间，默认关闭浏览器后失效	4kb	一般不可以，但是在相同作用域下可以允许接口请求携带cookie	每次都会携带在http中
localStorage	除非被浏览器清缓存，否则会一直存在	5MB	只在浏览器中保存	不可以
sessionStorage	仅在当前会话下有效，关闭页面或浏览器后被清楚	5MB	只在浏览器中保存	不可以

1. Cookie

• 由服务器发送给客户端(浏览器)的信息
• 关闭浏览器的时候连接会断开，服务端不会记录用户的信息。
• 同时也可以很好的让我们去访问服务的时候 先读取用户是否存在记录

cookie 以键值对的形式

username=Liu

• 当你在浏览器访问服务器上请求数据时，该页面的cookie会被添加到该请求中，服务器可以通过这种形式来获取用户信息。

1-1. 创建 cookie

1. document.cookie = 'username=liu'

2. 我们还也可以为 cookie 添加一个过期时间(UTC 或 GMT 时间)
document.cookie = 'useraname=liu;expires='+new Date().toUTCString() // 'useraname=liu;expires=Tue, 16 Jan 2024 03:06:09 GMT'  但是默认情况下 cookie 会在浏览器关闭时删除

1-2. 获取 cookie

var key = document.cookie
// 会获取当前浏览器页下的所有cookie数据

1-3. 删除 cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 只要设置一个以前时间就可以了

• 简单案例

<button>设置cookie</button>
<button>读取cookie</button>
<button>删除cookie</button>

  <script> 
    let btn = document.querySelectorAll('button')
    btn[0].onclick = function(){
      document.cookie = "name=admin"
      let date = new Date()
      date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000)  // 7 天过期
      // expires 设置 cookie 权限
      document.cookie = "username=admin;expires=" + date.toUTCString();
    }
    btn[1].onclick = function(){
      let cookies = document.cookie;
      let value = getCookieValue('username',cookies)
      if(!value){
        console.log("你输入的值不在");
        return;
      }
      console.log(value);
    }

    // 删除 Cookie
    btn[2].onclick = function(){
      let cookies = document.cookie;
      let cookiesArr = cookies.split(';');
      for(let cookie of cookiesArr){
        let cookieArr = cookie.trim().split('=');
        if(cookieArr[0] == 'username'){
          let exTime = new Date().toUTCString();
          // console.log(exTime,'cookie=',cookie);
          document.cookie = cookie+';expires='+exTime;
          break;
        }
        
      }
      
    }

    // 方法
    function getCookieValue(key,cookies){
      let cookiesArr = cookies.split(';')
      for(let cookie of cookiesArr){
        // trim() 截取字符串两边的空格
        let cookieArr = cookie.trim().split('=');
        let kName = cookieArr[0]
        if(kName == key){
          return cookieArr[1] // 返回值
        }
      }
      return null
    }
  
  </script>

2. localStorage

• 存储在浏览器 控制台 application 中，不手动删除的情况下回一直保存。

1. 存储
localStorage.setItem("name","白菜") // 第二个参数也可以是json串

2. 获取存储
localStorage.getItem("name") // 白菜

3. 删除存储
localStorage.removeItem("name")

3. sessionStorage

• 临时保存同一窗口(或标签页)的数据，在关闭窗口或关闭页面的时候清除数据

1. 存储
sessionStorage.setItem("name","白菜")

2. 读取
sessionStorage.getItem("name")

3. 删除
sessionStorage.removeItem("name")

4. 清空
sessionStorage.clear() 会把存储的所有数据清空