WEB 客户端存储 - PLDaily Blog

web客户端存储主要包括cookie、localStorage与sessionStorage。本文详细介绍三者之前的区别。

cookie的保存

cookie的名/值中的值不允许包含分号、逗号和空白号，采用encodeURIComponent对值进行编码，decodeURIComponent进行解码

cookie设置的参数

key：名 value：值 path：路径 expires：过期时间(该属性有HTTP1.0定义，支持IE8。max-age为HTTP1.1定义，不支持IE8)

存储cookie

function setCookie(name, value, expires, path) {
    document.cookie =name + '=' + encodeURIComponent(value) + ';expires = ' + expires + ';path = ' + path;
}

setCookie("name", "pcd", 1000*60*60, '/');

获取cookie

function getCookie(key) {
    var all = document.cookie;
    var list = all.split(';');
    if(all === '') {
        return cookie;
    }
    for(var i = 0; i < list.length; i++) {
        var cookie = list[i].trim();//去除空白字符
        var p = cookie.indexOf('=');
        var name = cookie.substring(0, p);
        if(name == key) {
            var value = cookie.substring(p + 1);
            value = decodeURIComponent(value);
            return value;
        }
    }

    return false;
}

console.log(getCookie('name'));//pcd

cookie的局限性：

因为每一次HTTP请求会把这些数据传输到服务器，所以浏览器对每个cookie的保存数据不能超过4k。

localStorage与sessionStorage

兼容性：支持IE8及IE8+

容量：5-10M

区别：

localStorage存储的数据是永久的，除非刻意删除
sessionStorage存储的数据是暂时的，到浏览器关闭前
sessionStorage作用域是限制在顶层窗口，同源共享限于同一标签页面，例：两个标签页运行同一同源页面，其中一个页面对sessionStorage进行修改操作时，另一页面无法获取该操作后的属性。 4.localStorage与sessionStorage不同，例：两个标签页运行同一同源页面，其中一个页面对localStorage进行修改操作时，另一页面就会接收到一个存储事件，即可以获取该操作后的属性。

为存储事件注册处理程序

window.addEventListener('storage', function(e) {
    console.log(e.key + "--" + e.newValue + "--" + e.oldValue + "--" + e.storageArea + "--" + e.url);
}, true)

localStorage使用广播机制。

使用示例：一个基于WEB的图片编辑应用，通常允许其他窗口展示工具条。当用户选择一个工具时，应用使用localStorage存储当前状态，便可通知其他窗口用户选择了新工具(其他窗口通过存储事件监听)。

cookie