码迷,mamicode.com
首页 > 其他好文 > 详细

localStorage 杂记

时间:2016-08-17 16:45:34      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

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 对象
属性 类型 说明
key string 增加、删除或者修改的那个键
oldValue any 改写之前的旧值,如果是新增的元素,则是 null
newValue any 改写之后的新值,如果是删除的元素,则是 null
url string 触发这个改变事件的页面 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);

 

localStorage 杂记

标签:

原文地址:http://www.cnblogs.com/edit/p/5780441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!