H5笔记1-本地存储localStorage

localStorage是啥？

在很久很久以前，客户端存储信息用的都是cookie。但是cookie在存储空间上，有一些限制。

浏览器	cookie个数（每个域名）	单个cookie容量限制
Microsoft	50个	4KB左右(包括name、value和等号)
Firefox	50个	4KB左右(包括name、value和等号)
Opera	30个	4KB左右(包括name、value和等号)
Chrome	53个	4KB左右(包括name、value和等号)

随着时代的进步，localStorage诞生了！官方建议是每个域名5MB，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。
注意：localStorage存储的信息，只能是字符串格式的。

如何使用localStorage?

1，判断浏览器是否支持localStorage:

if(window.localStorage){
    alert('支持！');
}else{
    alert('对不起，不支持！');
}

2，存储数据的方法：

localStorage.a = 3;//设置a为"3"
var a2 = localStorage.a;//获取a的值

localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
var a1 = localStorage["a"];//获取a的值

localStorage.setItem("b","isaac");//设置b为"isaac"
var b = localStorage.getItem("b");//获取b的值

localStorage.removeItem("c");//清除c的值
localStorage.clear();//一次性清除所有的键值对

//查询某个域名下有哪些key
var storage = window.localStorage;
function showStorage(){
    for(var i=0;i<storage.length;i++){
        var key = storage.key(i);
    }
}

注意：在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

那么我们的数据存到哪里去了呢？以谷歌浏览器为例，它存储的路径是：
C:\Users\Administrator\AppData\Local\Google\Chrome\UserData\Default\Local Storage；见截图：

通常情况是，每个域名对应一个存储文件，文件大小最大一般为5M.有的浏览器支持扩展空间，有的则直接报错！

HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
 }else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
 }

function handle_storage(e){
    if(!e){
        e=window.event;
    }
    //showStorage();
}

对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，但是浏览器不同，该对象的属性也会不同。属性举例： key、oldValue、newValue、url/uri。

localStorage与cookie的区别

（1）localStorage的存储容量比cookie更大；

（2）cookie作为http规范的一部分，它的主要作用是与服务器进行交互，使http保持连接状态。也就是说每次你请求一个新的页面的时候，Cookie都会被发送过去，这样也会无形中浪费了带宽；
localStorage仅仅是为了在本地“存储”数据而生；

（3）cookie保存时可以指定能访问该cookie的范围，默认情况下,如果在某个页面创建了一个cookie,那么这个页面所在目录中的其他页面也可以访问这个cookie.如果这个目录下还有子目录,则在子目录中也可以访问。
如果要使cookie在当前整个网站下可用,可以将cookie_dir指定为根目录,例如：document.cookie=”userid=320;path=/”;
localstorage的存储范围就是当前整个网站，不存在指定访问范围这一说。
两者都不支持跨域调用；

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。