cookie, localStorage和sessionStorage区别

1、cookie
       ①用于客户端和服务端通信

       ②API需要封装才能使用

       ③使用document.cookie获取

       ④存储量太小，数据不能超过4k

       ⑤cookie数据存放在客户的浏览器上

       ⑥可以和服务器产生联系，老技术

       ⑦始终在请求中携带，会影响获取资源的效率

// 操作示范:
     // 创建cookie
     document.cookie = "name";
     // 读取 cookie
     var x = document.cookie;
     // 删除 cookie : 将 cookie 的过期时候设置成比当前时间小就可以了

2、localStorage
       ①API简单易用

       ②容量一般是5M

       ③不会和服务器产生联系，html5的版本中新增的技术，有兼容

       ④相同浏览器下，localStorage可以在不同标签页之间数据共享

       ⑤除非手动清除，不然一直存在，包括浏览器关闭、关机重启。一般用做持久数据

       

// 操作示范:
     // 存数据
    localStorage.setItem("name","admin");
     // 改数据
    localStorage.setItem("name","root");
    // 获取localStorage的项目数
    localStorage.length;
     // 删数据
    localStorage.removeItem("name");
     // 删除所有数据
    localStorage.clear();   // 慎用！！！
     // 读数据：若使用方法获取不存在的属性，会得到null
    localStorage.getItem("name");

3、sessionStorage
       ①API简单易用

       ②容量一般是5M

       ③不会和服务器产生联系，html5的版本中新增的技术，有兼容

       ④相同浏览器下，sessionStorage在不同标签页之间数据无法共享

       ⑤只在当前浏览器窗口关闭之前有效

       

// 操作示范:
     // 获取指定key本地存储的值
     sessionStorage.getItem(key);
     // 将value存储到key字段
     sessionStorage.setItem(key,value);
     // 删除指定key本地存储的值
     sessionStorage.removeItem(key);
     // 获取sessionStorage的项目数
     sessionStorage.length;
     // 清空当前端口所有
     sessionStorage.clear(); // 慎用！！！