[JavaScript] localStorage 介紹與使用

何謂localStorage

---

        window.localStorage(window可省略)是由html5所提供的一個web storage，擁有5MB的大小，可供程式設計者使用，當然它是無法跨域使用，因為他與cookie一樣是認domain name。你可以盡情的去揮灑這web storage來降低request數量，亦或是用來儲存一些不重要但卻影響著效能等等的資訊。
       在支援web storage下，你可以使用JavaScript來操作 ，那localStorage可以存些什麼呢?localStorage 是以key-value方式儲存資料，所儲存的東西沒有限制。且localStorage的資料不會隨著使用者關閉瀏覽器而消失，除非使用者清空localStorage或程式設計者執行clear或removeItem，他們將一直存在不會消失。


localStorage有幾種method可供使用length, key, getItem, setItem, removeItem，
以下為他們的傳出與傳入的變數 :
1. long length
2. DOMString key(long)
3. anyvalue getItem(DOMString key)
4. void setItem(DOMString key, anyvalue)
5. void removeItem(DOMString key)
6. void clear()

length 為read only，表示目前所儲存的資料個數
key 將所在資料位置的DOMString拿出
getItem 用DOMString key將value拿出
setItem 用DOMString key設定value
removeItem 移除該資料
clear 清空整個localStorage



使用範例

---

範例一 介紹六大localStorage method使用方法
範例1程式碼

/* set items */
localStorage.setItem("TechARide","TAR");
// another way
localStorage["Zam"] = "Zam";
localStorage["today"] = 20120710;

/* get items */
console.log(localStorage.getItem("TechARide"));
// another way
console.log(localStorage["Zam"]);
console.log(localStorage["today"]);

/* get lenth */
console.log("length = " + localStorage.length);

/* get key DOMString */
for (var i=0; i++)


/* clear */
localStorage.clear();

範例1結果

/* get items */
TAR
Zam
20120710

/* get lenth */
length = 3

/* get key DOMString */
TechARide
Zam
today

/* remove item */
length = 2

/* clear */
length = 0

範例二 store/get an object or object of array

// object of array 存取教學
var array = [{"TechARide":"localStorage 介紹與使用","date":20120710},{"Author":"Zam","date":20120710}];

// 在你放入之前，要先使用轉JSON String
localStorage("array",JSON.stringify(array));

// 拿出來再將其轉回來
var storage = JSON.parse(localStorage("array"));

範例三 判斷瀏覽器是否支援(localStorage support)

    if (localStorage) {
        return "Local Storage: Supported";  
    } else {
        return "Local Storage: Unsupported";  
    }