sessionStorage新开页面 sessionstorage session

转载

风华正茂的AI 2024-05-12 22:25:23

文章标签 sessionStorage新开页面 HTML5 LocalStorage 缓存数据 文章分类 架构后端开发

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

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的，基本上足够满足需求。

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

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

前端的渣页面是这样的：

sessionStorage新开页面 sessionstorage session_数据

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

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

功能我是这样写的：

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

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