页面缓存

说明:localStorage和sessionStorage是以key-value形式保存数据的，key和value只能是字符串格式。

 a.  localStorage没有过期时间，只要不clear或remove，数据会一直保存。

   b. sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

  建议使用setItem(), getItem(), removeItem(), clear()来实现写入，读取，删除，清空。

一、下面是页面一种的代码:

<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>

<script>

$(function(){

var jsonObj = '[{"employees": [ { "firstName": "Bill","lastName": "Gates" }, { "firstName": "George","lastName": "Bush" }, { "firstName": "Thomas", "lastName": "Carter"}] }]';

//localStorage是本地缓存，一直在本地保存，sessionStorage的生命周期

//跟session一致,二者的用法相同

 localStorage.setItem("jsonData", jsonObj);

 

 for(var i=0; i<10; i++){

localStorage.setItem(i,'A_'+i);

 }

 var content = localStorage.getItem(3);

 alert(content);

});

</script>

二、下面是页面二中的代码:

 <script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>

<script>

$(function(){

 //清除缓存

 //localStorage.clear();

            //这里可以获取到页面一种的localStorage里面缓存的数据，

 var content = localStorage.getItem("jsonData");

 //Json字符串转Jaon对象方法一

 var JsonContent1 = eval（'('+content+')');

  //Json字符串转Jaon对象方法二

  var JsonContent2 = $.parseJSON(content);

   //Json字符串转Jaon对象方法三

   var JsonContent3 = JSON.parse(content);

   var str = JSON.stringify(JsonContent3); //可以将json对象转换成json对符串 

 for(var i=0;i<JsonContent3.length;i++){

    var father = JsonContent3[i];

    console.info(father);

    for(var j in father){

      var child = father[j];

      console.info(child);

      for(var k in child){

        var sobj = child[k]; 

        alert(sobj["firstName"]);

        alert(sobj.firstName);

        console.info(sobj); 

      }

    }

 }

 console.info(content);

});

</script>

三、监听localStorage的值，当发生变化时同步页面数据

 // 监听数据变化,当数据发生变化时,同步数据显示  

window.onstorage = function(event){  

    var status = {}  

    status.key = event.key;  

    status.oldValue = event.oldValue;  

    status.newValue = event.newValue;  

    status.url = event.url;  

    status.storage = event.storageArea;  

  

    // 执行同步数据处理...  

}  

本地数据库存储URL:http://www.cnblogs.com/dolphinX/p/3415761.html