localStorage 杂记

最新推荐文章于 2025-09-13 21:59:18 发布

weixin_30737433

最新推荐文章于 2025-09-13 21:59:18 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： json 移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/edit/p/5780441.html

本文介绍了HTML5提供的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 对象
属性	类型	说明
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);

转载于:https://www.cnblogs.com/edit/p/5780441.html