JavaScript本地存储sessionStorage,localStorage,cookie

1. sessionStorage
   当前会话有效，页面关闭浏览器清除，大小最大为5MB

  <script>
    window.sessionStorage.setItem("name","zzz"); // setItme(key,value)添加数据
    window.sessionStorage.getItem("name"); // getItem(key)获取数据
    window.sessionStorage.removeItem("name"); // removeItem(key)删除某个数据
    window.sessionStorage.clear(); clear()清空所有数据
  </script>

2. localStorage
   长久保存整个网站的数据，直到手动删除，大小最大为5MB

<script>
  window.localStorage.setItem("name","jj");setItem(key,value)添加数据
  localStorage.getItem("name");getItem(key)获取数据
  window.localStorage.removeItem("name");remove(key)删除数据
  window.localStorage.clear(); // 清除数据
</script>

1. cookie

cookie是一些数据，存于文件中，保存Web页面用户信息，会过期，如果不设置过期时间，浏览器关闭，cookie就会消失，也可以手动清除，cookie每次都会被携带在HTTP头中，cookie过多会带来性能问题，一般每个域名下是4K左右，大约50个键值对

  <script>
    doucment.cookie = "name = zzz"; //设置cookie
    let msg = document.cookie; //读取cokkie

    let d = new Date();
    var day = 3;
    d.setDate(d.getDate()+day);
    document.cookie = "name = zzz" + d; // 添加过期时间

    d.setDate(d.getDate() - 1);// 删除cookie(给某个键值对设置过期的时间)
  </script>

1. 传递方式不同

• cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

2. 数据大小不同

• cookie 4K,因为HTTP携带
• sessionStorage和localStorage 5MB+

3. 数据有效期不同

• sessionStorage：窗口关闭前有效
• localStorage：长期有效
• cookie：过期时间前有效

4. 作用域不同

• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
• localStorage 在所有同源窗口中都是共享的；
• cookie也是在所有同源窗口中都是共享的。