HTML5的LocalStorage、SessionStorage学习

参考了叶小钗大大的博客http://www.cnblogs.com/yexiaochai/p/4509472.html

引用叶小钗大大博客的一句

localstorage存储对象分为两种：

① sessionStorage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。

② localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。

我们需要做的是每次登录，进行重新刷新，其实是sessionStorage即可，没有必要进行长期的缓存。

操作：

创建变量	window.localStorage	window.sessionStorage
存入数据	localStorage.setItem("key","value")	sessionStorage.setItem("key","value")
删除一条	localStorage.getItem("key")	sessionStorage.getItem("key")
查询数据	localStorage.remove("key")	sessionStorage.remove("key")
清除	localStorage.clear()	sessionStorage.clear()

支持浏览器：

IE8.0+，FireFox，Opera，Chrome，Safari，iPhone，Android

基本上，每个浏览器对每个网页的默认大小都是4M的，基本上足够满足需求。

---

以下是我写的测试demo，简单地说明一下，测试demo的下载地址，点我下载

向后台请求，会返回一个当前的服务器时间，这个样子的

out.println("{\"timeStamp\":\""+String.format("%1$tF %1$tT",new Date(),new Date())+"\"}");

后台每请求一次，后台会打印一次结果。

前端的渣页面是这样的：

这个只是页面，需求或者说测试用例我是这样设计的：

1. 一开始两次从后台获取数据，显示到对应的位置上
2. 刷新页面，查看是否进行变化
3. 去另一个页面，再从另一个页面跳转回来，查看是否有变化
4. 关闭页面再重新打开，查看是否有变化
5. 清除缓存，查看是否有变化

功能我是这样写的：

匆忙之前写的测试代码，有点渣，呵呵

var sessionStorage = window.sessionStorage;
          var localStorage = window.localStorage;
          if(!sessionStorage){
              console.log("该浏览器不支持本地缓存");
              sessionStorage={};
              localStorage = {};
          }
        window.οnlοad=function(){
            updatePage();
        };
        document.getElementById("clearCache").οnclick=clear;
        function updatePage(){
            var sessionTime = sessionStorage.getItem("timeStamp");
            if(sessionTime=="undefined" || !sessionTime){
                getTextArea(sessionStorage);
            }
            var localTime = localStorage.getItem("timeStamp");
            if(localTime=="undefined" || !localTime){
                getTextArea(localStorage);
            }
            refreshElements();

        }
        function refreshElements(){
            $("#sessionStorage span").html(sessionStorage.getItem("timeStamp"));
            $("#localStorage span").html(localStorage.getItem("timeStamp"));
        }
        function getTextArea(storage){
               $.ajax({
                   url:"GetTimeStamp",
                   dataType:"json",
                   success:function(resp){

                       storage.setItem("timeStamp",resp.timeStamp);
                       refreshElements();
                   }
               });
        }
        function clear(){
            sessionStorage.clear();
               localStorage.clear();
        }

测试结果是这样的：

	用例	sessionStorage	localStorage
1	初始	2015-12-30 15:21:24	2015-12-30 15:21:24
2	刷新	2015-12-30 15:21:24	2015-12-30 15:21:24
3	跳转	2015-12-30 15:21:24	2015-12-30 15:21:24
4	关闭重新打开（关闭会话）	2015-12-30 15:21:54	2015-12-30 15:21:24
5	清空缓存，刷新	2015-12-30 15:22:08	2015-12-30 15:22:08

也就是说，sessionStorage会在关闭页面的时候将缓存清掉，除此之外，与localStorage相同，能满足我们的开发需求。因此选用sessionStorage。

demo做完我随手放到桌面上了，我昨天装系统忘记把demo备份了，很不幸地丢掉了。demo也很简单，超级懒癌患者放弃治疗了……