html5的window.localStorage

一、localStorage解惑
1、localstorage是HTML5提供的客户端储存数据的新方法
2、没有时间限制，不会自动清除，但是可以通过一些”手段”达到自动清除的效果
3、对于不同网站，数据储存在不同的区域，并且每个网站只能访问自身的数据，（同源：规则、主机、端口相同）
4、对于浏览器，每个浏览器都有自己的localStorage储存空间，相互独立，互不干扰也不能互相访问，不需要以每个页面为单位。
5、兼容性：IE8.0+ 、 Firefox3.0+ 、 opera10.5+ 、Chrome4.0+ 、 Safari4.0+ 、 ipone2.0+ 、 Android2.0+，对于不支持localStorage的，可以使用下面的代码让浏览器看上去支持localStorage，对于不支持localStorage的”一样可以使用localStorage的方法”储存数据，实际上内部用的cookie
PS：localStorage存储大小5M、、、cookie 貌似4k左右

if (!window.localStorage) {
        window.localStorage = {
            getItem: function (sKey) {
                if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
                return decodeURIComponent(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
            },
            key: function (nKeyId) {
                return decodeURIComponent(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
            },
            setItem: function (sKey, sValue) {
                if(!sKey) { return; }
                document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
                this.length = document.cookie.match(/\=/g).length;
            },
            length: 0,
            removeItem: function (sKey) {
                if (!sKey || !this.hasOwnProperty(sKey)) { return; }
                document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                this.length--;
            },
            hasOwnProperty: function (sKey) {
                return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
            }
        };
        window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
    }

6、判断浏览器是否支持localStorage
if(window.localStorage){
//…..当浏览器支持时执行
}else{
//…..当浏览器不支持时执行
}

7、localStorage对象的方法，设置、获取、删除
7.1）、设置有三种方法：

localStorage.setItem('username','jieke');  //或
localStorage['username'] = 'jieke';   //或
localStorage.username = 'jieke';

7.2）、获取也有四种方法：

var res = localStorage.getItem('username');  //或
var res = localStorage['username'];   //或
var res = localStorage.username;    、//或
var res = localStorage.key(index); //这个方法用于遍历所有的数据很方便，注意：返回的是key

7.3）、删除有两种方法：

localStorage.removeItem(key); //无返回值，一次只删除一条，如果没有对应的key则不执行任何操作
localStorage.clear();  //删除同源存储列表中的所有数据

7.4）、获取有多少条数据：var res = localStorage.length;

8、localStorage和sessionStorage的区别，生命周期和可见范围不一样
8.1）、sessionStorage数据只会保存到存储他的当前标签页关闭，localStorage数据的生命期比窗口或浏览器长
8.2）、sessionStorage数据只在构建它们的标签页内可见，localStorage数据可被同源（规则、主机、端口相同）的每个窗口或标签页访问
PS：sessionStorage是以一个标签页为单位，当打开一个标签页，这个标签页会为它划一块空间存放sessionStorage的数据，当这个标签页关闭时，这块空间清除。如果点击一个链接，在当前页面打开(target=”_self”)，那么新页面能访问之前那个页面的sessionStorage对象，这就是以一个标签页为单位。当数据不需要长时间保存到下次继续使用的情况下可以使用sessionStorage
PS：localStorage是以某种浏览器为单位，当用某种浏览器打开一个网站的某个有localStorage数据的网页时，这个浏览器会为一个源(同规则、主机、端口)划一块空间存放localStorage数据，一旦存放，只有手动删除数据才会消失

PS：web-storage-cache项目 https://github.com/WQTeam/web-storage-cache/releases

二、Web Storage的事件机制
1、当储存的内容有更新时的通知机制：通知对此内容添加了监听的页面
window.addEventListener(‘storage’, storageEvent. true); //给window添加storage事件，并指定事件处理函数storageEvent,当调用这个函数时，会传入一个事件对象
function storageEvent(e){ //… }
//假设：window添加了storage事件，当事件触发时调用windowStorage函数，函数如下：
function windowStorage(storageEvent){
//…………
storageEvent(e); //这时会传递一个事件对象给我们自定义的事件处理函数，这个事件对象很重要
}

//事件对象StorageEvent接口如下：
        interface StorageEvent : Event{
            readonly attribute DOMString key;  //被更新的那条数据的key
            readonly attribute any oldValue;   //被更新的那条数据的更新前的值
            readonly attribute any newValue;   //被更新的那条数据的更新后的值
            readonly attribute DOMString url;  //当前页面的链接
            readonly attribute Storage storageArea;  //指向值发生改变的localStorage或sessionStorage对象的引用
        }

思路：网站a中有页面b、c，b添加了storage事件，c中有setItem对localStorage的某条数据进行修改的数据，这时：先访问了b，然后去访问c，会触发b中的storage事件

三、JSON对象的存储
1、demo01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>1</title>
</head>
<body>
    <input type="text" name="username" id="username"/>
    <a href="demo02.html" target="_self">go to demo02</a>

<script>
    function loadData(){
        var name = JSON.parse(sessionStorage.getItem('name'));
        if(!!name){
            alert(name.name);
        }
    }
    function unload(){
        var username = document.getElementById('username').value;
        if(!username){
            username = '没有输入';
        }
        var val = '{"name":"'+username+'"}'
        sessionStorage.setItem('name', val);
    }
    window.addEventListener('load', loadData, true);
    window.addEventListener('unload', unload, true);
</script>
</body>
</html>

2、demo02.html

<script>
    function loadData(){
        var name = JSON.parse(sessionStorage.getItem('name'));
        if(!!name){
            alert(name.name);
        }
    }
    function unload(){
        var username = document.getElementById('username').value;
        if(!username){
            username = '没有输入';
        }
        var val = '{"name":"'+username+'"}'
        sessionStorage.setItem('name', val);
    }
    window.addEventListener('load', loadData, true);
    window.addEventListener('unload', unload, true);
</script>