你的位置:首页 > Java教程

[Java教程]localStorage 杂记


localStorage

html5标准 Web 存储
现在的主流浏览器,包括IE 8+、Chrome 4+、Firefox 3.5+、Opera 10.5+、Safari 4+、iPhone 2+、Android 2+等,都支持localStorage本地存储功能。

localStorage没有时间上的限制,只要不主动删除,会一直保存。
单条value没有长度限制,但是每个站点使用总量有限制。
chrome的上限是4.9MB,其它浏览器的容量上限也大都在2.5-10MB之间。

 

检测浏览器是否支持localStorage

function check_localStorage_support(){  if(window.localStorage){    return true;  }    alert("Sorry,your browser does NOT support localStorage!");  return false;}

 

localStorage 基于键值对存储,读、写、删操作很简单

localStorage.a = 3;  //设置a为"3"localStorage["a"] = "abc";  //设置a为"abc",也覆盖了上面的值var a1 = localStorage["a"];  //获取a的值var a2 = localStorage.a;  //获取a的值console.log(a1 + "\t" + a2);localStorage.setItem("b","I am b");  //设置b为"I am b"var b = localStorage.getItem("b");  //获取b的值console.log(b);localStorage.removeItem("b");  //清除b的值console.log(localStorage.getItem("b"));//输出所有键值对function showStorage(){  var storage = window.localStorage;  for(var i=0;i<storage.length;i++){    //key(i)获得相应的键,再用getItem()方法获得对应的值    document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");  }}//清除所有键值对localStorage.clear();      

添加监听事件

if(window.addEventListener){  window.addEventListener("storage",handle_storage,false);}else if(window.attachEvent){  window.attachEvent("onstorage",handle_storage);}function handle_storage(e){  if(!e){e=window.event;}  //showStorage();}

StorageEvent 对象
属性类型说明
keystring增加、删除或者修改的那个键
oldValueany改写之前的旧值,如果是新增的元素,则是 null
newValueany改写之后的新值,如果是删除的元素,则是 null
urlstring触发这个改变事件的页面 URL

 

 

从localStorage读取一个对象

var chapter = JSON.parse(localStorage.getItem(chapterid));

使用Jquery Ajax 获取一个json并存入localStorage

$.getJSON("/worker/json/"+Chapterid+".json",function(result){  localStorage.setItem(chapterid,JSON.stringify(result));}); 

php生成json的代码

class chapter_data {  public $serialid = 0;  public $serialtitle = "";  public $serialcontent = "";}$chapter = new chapter_data();$chapter->serialid = 1;$chapter->serialtitle = "文章标题";$chapter->serialcontent = "文章内容";echo json_encode($chapter);