JavaScript客户端存储

JavaScript客户端存储

简单来说，JavaScript客户端存储的作用就是保存从接口请求的数据以求在页面切换，浏览器关闭，时间过期等情况下仍能在不请求数据的情况下拿到我们之前获取过的数据信息。这个东西稍微查一下已经是被写烂了的东西，无非是localstorage，sessionstorage和cookie这些东西，但是在这边还是写下来加深印象。

• JavaScript客户端存储
  
  • 1.客户端存储
  • 2.localStorage和sessionStorage
    
    • 如何使用
      
      • 简单的存，取和遍历
      • Storage对象正式的API
    • 区别
      
      • 存储的有效期
      • 作用域
      • 存储量
  • 3.cookie
    
    • 如何使用
    • 局限性
  • 4.总结

1.客户端存储

localStorage，sessionStorage和cookie并不是都处于同一个存储机制下的，localStorage和sessionStorage是现在客户端存储常用的一种形式，属于web存储，是名值对的映射表，cookie是早期的客户端存储机制，只适合存储少量文本信息。
还有就是除了这两种，IE有其独有的客户端存储机制，“userData”,还有web数据库，离线web应用，文件系统API等等。

2.localStorage和sessionStorage

如何使用

localStorage和sessionStorage是Window对象上定义的两个属性，所以不需要特别声明，直接拿来用就行。它们的用法也基本相同，所以这里我们只需要先用localStorage属性（当然它们本身就是一个对象，实际上是持久化关联数组，数组使用字符串索引，存储的值也是字符串），之后它们带来的效果不同放在区别中讲。

简单的存，取和遍历

var name = localStorage.username;
name = localStorage["username"];
if(!name){
    name = prompt("What is your name?");
    localStorage.username = name;
}

for(var name in localStorage){
    var value = localStorage[name];
}

Storage对象正式的API

//存储与获取
localStorage.setItem("x",1);
localStorage.getItem("x";)
//遍历
for(var i = 0;i < localStorage.length;i++){
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}
//删除
localStorage.removeItem("x");//删除"x"项
localStorage.clear();//全部删除

区别

存储的有效期

localStorage: 存储的数据是永久性的，除非web应用或者用户刻意删除，否则一直保留。
sessionStorage: 一旦窗口或者标签页被永久关闭了，数据即被删除。

作用域

文档源通过协议，主机名及端口确定，所以这三个要是有不同，那就说明不是同一文档源。
localStorage: 同源文档可以共享存储数据。
sessionStorage: 不仅限定在文档源，标签不同，数据也没法共享。

存储量

Chrome，Firefox和Opera是5M，IE是10M。

3.cookie

最早是服务器用的，会自动在浏览器和服务器之间传输，让服务器可以读写存储在客户端的cookie值，cookie是Document对象的属性。

如何使用

cookie的操作相比Storage对象就很麻烦了。

//存储(值不允许包含分号，逗号和空白符，需要编码)
document.cookie = "version=" + encodeURIComponent(document.lastModified);

//指定存储天数
function setcookie(name,value,daysToLive){
    var cookie = name + "=" + encodeURIComponent(value);
    if (typeof daysToLive === "number"){
        cookie += ";max-age=" + (daysToLive*60*60*24)
    }
    document.cookie = cookie;
}

//直接返回肯定是一串字符串，所以还需要手动区分(真的脑残)
function getcookie(){
    var cookie = {};
    var all = document.cookie;
    if(all === "")
        return cookie;
    var list = all.split("; ");//分离出名/值对
    for(var i = 0; i < list.length; i++){
        var cookie = list[i];
        var p = cookie.indexOf("=");
        var name = cookie.substring(0,p);
        var value = cookie.substring(p+1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

局限性

有效期: 整个浏览器，关闭就消失。不过可以像上面那样设置保存时间。
作用域: Web页面及和该页面同目录或者子目录的其他Web页面可见。
存储量: 一般情况下4KB。

4.总结

相比 cookie ，Web Storage 的优点主要表现在存储空间更大，可存储的内容更大。cookie每次都随请求数据发送到服务器端，Web Storage不会和请求数据一同发送到服务器端，占用带宽更少。缺点主要表现在，现在所有浏览器都支持 cookie 操作，而只有现在浏览器才支持 Web Storage 操作，如果需要兼容老旧浏览器，就不能使用 Web Storage。

类型	作用域	存储时效	存储大小
localStorage	同一源文档	除非用户删除，否则永久保存	5M
sessionStorage	同一标签页	标签页关闭即删除	5M
cookie	同一浏览器	不指定的话，浏览器关闭即删除	4KB