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();
}

從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);