html5本地存储技术sessionStorage和localStorage方法介绍

在Html5之前浏览器存储数据，尤其是用户浏览器的痕迹，以及用户的相关数据等一般只能存储在Cookie中，但是Cookie的限制也就逼迫网站存储数据尽量精简，复杂的、关系型的用户数据就根本不可能存储了。cookie的限制是（4096字节）
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

一、sessionStorage会话级别的本地存储

sessionStorage；是浏览器中的的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，生命周期为关闭浏览器窗口，窗口关闭后数据会自动清除，效果跟未设置过期时间的Cookie类似。在同一个窗口(页面)下数据可以共享。
sessionStorage的容量约为5M。
sessionStorage提供了四个方法：
1、 setItem(key, value) 设置存储内容
2、getItem(key) 读取存储内容
3、 removeItem(key) 删除键值为key的存储内容
4、 clear() 清空所有存储内容慎用

二、localStorage永久级别的本地存储

localStorage 是浏览器中存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，它永久的存储在浏览器中（除非手动删除）可以多窗口 （页面）共享。
localStorage的容量为20M，这完全是颠覆了Cookie的限制，
localStorage提供了四个方法（和sessionStorage方法一样）：
1、 setItem(key, value) 设置存储内容
2、getItem(key) 读取存储内容
3、 removeItem(key) 删除键值为key的存储内容
4、 clear() 清空所有存储内容慎用


使用案例：

 var historyListStr = localStorage.getItem('historyList') || '[]';
        var historyArr = JSON.parse(historyListStr);
        var render = function () {
            var html = '';
            historyArr.forEach(function (item, i) {
                html += "<li><span>" + item + "</span><a data-index=" + i + " href=\"javascript:;\">删除</a></li>"
            });
            html = html || " <li>没有搜索记录</li>";
            $("ul").html(html);
        }
        render();
        $("[type='button']").on("click", function () {
            var val = $.trim($("[type='search']").val());
            if (!val) {
                alert("请输入关键字");
                return false;
            }
            historyArr.push(val);
            localStorage.setItem('historyList', JSON.stringify(historyArr));
            render();
            $("[type='search']").val('');
        })
        //2.单个删除
        $("ul").on("click", "a", function () {
            var index = $(this).data("index");
            historyArr.splice("index", 1);
            localStorage.setItem('historyList', JSON.stringify(historyArr));
            render();
        })
        //3.清空
        $("div").on("click", "a", function () {
            historyArr = [];
            localStorage.setItem('historyList', '');
            render();
        })