关于javascript:cookiessessionStorage和localStorage解释及区别

localStorage

localStorage 生命周期是永恒，除非被动革除 localStorage 信息，否则这些信息将永远存在。存放数据大小为个别为 5MB, 而且它仅在客户端（即浏览器）中保留，不参加和服务器的通信。

// 1、保留数据到本地
 
// 第一个参数是保留的变量名，第二个是赋给变量的值
 
localStorage.setItem('Author', 'local');
 
// 2、从本地存储获取数据
 
localStorage.getItem('Author');
 
// 3、从本地存储删除某个已保留的数据
 
localStorage.removeItem('Author');
 
// 4、革除所有保留的数据
 
localStorage.clear();

sessionStorage

sessionStorage 仅在以后会话下无效，敞开页面或浏览器后被革除。存放数据大小为个别为 5MB, 而且它仅在客户端（即浏览器）中保留，不参加和服务器的通信。

// 1、保留数据到本地
 
// 第一个参数是保留的变量名，第二个是赋给变量的值
 
sessionStorage.setItem('Author', 'session');
 
// 2、从本地存储获取数据
 
sessionStorage.getItem('Author');
 
// 3、从本地存储删除某个已保留的数据
 
sessionStorage.removeItem('Author');
 
// 4、革除所有保留的数据
 
sessionStorage.clear();

简单数据存储

下面都是对于简略的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，间接存储是不行的

谬误的存储：

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
sessionStorage.setItem('user', user);
 
console.log(sessionStorage.getItem('user'));

这个时候， 就须要转换数据格式。

存储数据前：利用 JSON.stringify 将对象转换成字符串

获取数据后：利用 JSON.parse 将字符串转换成对象

var user = {
 
username: 'liu',
 
password: '123456'
 
};
 
user = JSON.stringify(user);
 
sessionStorage.setItem('user', user);
 
var account = sessionStorage.getItem('user');
 
console.log(account);
 
account = JSON.parse(account)
 
console.log(account);

cookie 的保留与获取

cookie 机制：如果不在浏览器中设置过期事件，cookie 被保留在内存中，生命周期随浏览器的敞开而完结，这种 cookie 简称为会话 cookie。如果在浏览器中设置了 cookie 的过期事件，cookie 会被保留在硬盘中，敞开浏览器后，cookie 数据依然存在，直到过期事件完结才隐没。cookie 是服务端发给客户端的非凡信息，cookie 是以文本的形式保留在客户端，每次申请时都带上它

• 保留用户登录状态
• 跟踪用户行为
• 定制页面
• 创立购物车：应用 cookie 来记录用户须要购买的商品，再结帐的时候能够对立提交。(淘宝网就是应用 cookie 记录了用户已经浏览过的商品，不便随时进行比拟)

// 1、保留数据到本地

    // 第一个参数是保留的变量名，第二个是赋给变量的值

    // 保留 cookie

    // 参数：cookie 名,cookie 值, 无效时长 (单位：天)

    function saveCookie(cookieName, cookieValue, cookieDates) {var d = new Date();

        d.setDate(d.getDate() + cookieDates);

        document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toGMTString();}

cookie 的获取

 function getCookie(cookieName) {var cookieStr = unescape(document.cookie);

        var arr = cookieStr.split(";");

        var cookieValue = "";

        for (var i = 0; i < arr.length; i++) {var temp = arr[i].split("=");

            if (temp[0] == cookieName) {cookieValue = temp[1];

                break;

            }

        }

        return cookieValue;

    }

cookie 的删除

 // 删除 cookie

    function removeCookie(cookieName) {document.cookie = encodeURIComponent(cookieName) +“=; expires =”+ new Date();}

cookie 毛病：

1. 大小受限
2. 用户能够操作（禁用）cookie，使性能受限
3. 安全性较低
4. 有些状态不可能保留在客户端。
5. 每次拜访都要传送 cookie 给服务器，节约带宽。
6. cookie 数据有门路（path）的概念，能够限度 cookie 只属于某个门路下。