HTML5客户端数据存储Web Storage——localStorage与sessionStorage

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

HTML5提供了在客户端存储数据的新方法Web Storage
类似于HTML4中的Cookie
不过它要强大的多
#Cookie
先来简单复习一下之前使用的cookie

cookie存储数据到用户设备上，存储的数据量较小只有4KB
可以通过navigator.cookieEnabled检测是否开启了cookie

• 设置cookie document.cookie = 'key=value';
• 获取cookie document.cookie;
• 删除cookie document.cookie = "key=value;max-age=0";
• 设置max-age存储期限 document.cookie = "key=value;max-age=1000"; // 1000秒
• 设置expires存储期限

var timestamp = (new Date()).getTime() + 10000;
var expires = new Date(timestamp).toGMTString();//或toUTCString
document.cookie = "key=value;expires="+expires;

• 获取具体cookie值

function getCookie(name) {
    var name = name + "=";
    var ary = document.cookie.split(';');
    for(var i = 0; i < ary.length; i++){
        var c = ary[i];
        while (c.charAt(0) == ' '){
          c = c.substring(1);
        }
        if (c.indexOf(name) != -1){
          return c.substring(name.length, c.length);
        }
    }
    return "";
}

#Web Storage
Web Storage又分为两种
localStorage和sessionStorage
它们的区别是：

• localStorage存储的是永久数据，除非手动删除
• sessionStorage存储的是临时数据，窗口关闭就会消失

#简单使用
Web Storage只能存储字符串数据
我觉得可以把它们理解为JSON
使用方法都是类似的，已localStorage为例

localStorage.name = 'payen';
localStorage.info = JSON.stringify({name: 'payen', age: 20});
console.log(localStorage.name);
console.log(JSON.parse(localStorage.info));

要存储的数据名就是localStorage的属性名
普通的字符串正常存储就可以了
对象数据可以利用JSON.stringify()将其转换为字符串格式
使用的时候再用JSON.parse()转换回对象格式
（如果直接存储对象的话，它会被强制转换为字符串 “[object Object]”）

---

删除数据直接delete就好

delete localStorage.name;
delete localStorage.info;

如果不删除的话，localStorage里面的数据就会一直存在于你的浏览器了

#API
localStorage和sessionStorage还提供了简单的API
类似于一个客户端的数据库
（API都是相同的）
常用的有以下几个：

• 保存数据 setItem(key,value)
• 读取数据 getItem(key)
• 删除单个数据 removeItem(key)
• 清空全部数据 clearItem()
• 获取数据索引 key(index)

#实例
通过这个，我们可以写个简易的通讯录