cookie, localStorage and sessionStorage difference

1, the cookie
       ① for client and server communication

       ②API need to use package

       ③ use document.cookie get

       ④ storage amount is too small, data can not exceed 4k

       ⑤cookie data stored on the customer's browser

       ⑥ and the server can generate links, old technology

       ⑦ always carried in the request, it will affect the efficiency of access to resources

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

2, localStorage
       ①API easy to use

       ② capacity is generally 5M

       ③ server and will not have contact, html5 version of the new technology, compatible

       ④ the same browser, localStorage data can be shared between different tabs

       ⑤ unless cleared manually, or has always existed, including the browser is closed, shut down restart. Generally used as a persistent data

       

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

3, sessionStorage
       ①API easy to use

       ② capacity is generally 5M

       ③ server and will not have contact, html5 version of the new technology, compatible

       ④ In the same browser, sessionStorage data between different tabs can not be shared

       ⑤ valid only until the current browser window is closed

       

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