走进HTML5开发（4）——html5的本地存储

  这一篇对html5的存储做一个总结，另外有一个localStorage的例子：

   HTML5 提供了四种在客户端存储数据的新方法，即localStorage 、sessionStorage、globalStorage、WebSql Database。 前三个适用于存储较少的数据,而Web Sql Database适用于存储大型的，复杂的数据。

 本地存储是 Html5中的新标准，解决了现在使用的cookie存储中的存在的主要问题：

1）容量上：cookie的存储限制在了4k之内，或者20个key/value对，限制了大小。而web存储比cookie存储量大，在数据量上可以达到5M。

2）安全上：cookie在向后台发送每一个http请求的时候都会出现在http头部，其中的内容也会随着页面请求一并发往服务器。而html5的本地存储则不会，某种程度上也是是节约了带宽， 缩短了请求、响应的时间。至于Html5本地存储有多大的安全程度，可以查看天融信发布的《HTML5安全威胁报告》

 localStorage ：

1）只把数据存储在了客户端使用，不会发送到服务器上，没有时间限制

2）用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

sessionStorage：

1）从命名可以看出来，它的数据会随着窗口的关闭而消失，刷新页面或使用“前进”、“后退“后sessionStorage仍然存在

2）不同窗口间的sessionStorage不可以共享的

globalStorage：

1）和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。只有Firefox支持当前域下的globalStorage存储

2）过期时间同 localStorage，其它的一些特性也和localStorage相似。

WebSql Database：

1）对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是对琐碎的关系数据进行处理就要用到WebSql Database了

2）WebSql Database API不是HTML5规范的组成部分，而是单独的规范。

 localStorage 浏览器登录名和密码存储与提示

 <script>
        var el_name = $('#name');
        var el_password = $('#password');
        var el_submit = $('#submit');
        var el_suggest = $('#suggest');  //下拉提示框
        el_form = $('form'),   //表单
        storage_key = 'html5_local';//缓存key
        el_suggest.on('click', function (e) {
            var target = $(e.target);
            el_name.val(target.text());//写入昵称
            el_password.val(target.attr('data-pass'));//写入密码
        });
        el_form.on('submit', function () {   //截取表单提交保存账号密码
            var data = localStorage.getItem(storage_key);
            //获取key缓存内容
            data = data ? JSON.parse(data) : {};
            data[el_name.val().trim()] = el_password.val().trim();
            //缓存账号密码
            localStorage.setItem(storage_key, JSON.stringify(data));
            //设置缓存
        });
        var storage_data = localStorage.getItem(storage_key),
            //读取缓存
            html_arr = [];  //html字符数组
        if (storage_data) {
            storage_data = JSON.parse(storage_data);//解析为对象
            for (var key in storage_data) {        //循环缓存对象
                html_arr.push('<li data-pass="' + storage_data[key] + '">' + key + '</li>');
            };
            el_suggest.html(html_arr.join(''));  //设置下拉框结构
            el_name.on({
                'mousedown': function () { el_suggest.fadeIn(); },
                //单击展示下拉框
                'blur': function () { el_suggest.fadeOut(); }
                //失去焦点时隐藏下拉框
            });
        };
    </script>