html5 localStorage 實用

    html5的很多方法現在支持情況都越來越好了，特別是在移動端。最近做移動端小游戲用到localStorage，特將使用方法和遇到的問題加以說明。

    簡介

    localStorage是html5提供的供開發者本地存儲數據的一種特別方便的方法。開發者可以使用此方法講部分數據保存到本地，以便下次驗證，數據傳輸等。大部分pc瀏覽器存儲的數據量大小目前主流說法為5M以內，移動端瀏覽器沒有做這方面測試，所以沒有發言權。

    兼容性

    ie 8+

    firefox 3.0+

    opera 10.5+

    chrome 4.0+

    android 2.0+

    ios據說也是2.0+，沒見過ios 2.0的機器，所以可以認為ios無下限

    兼容性總體來說是沒有問題的，目前大部分pc端項目ie8考慮就可以了。但是如果你的項目面對的用戶群為廣大的網吧殺馬特少年，最好還是別用此屬性。當然，移動端可以放蕩的使用，沒有問題。

    使用方法

    localstorage提供了兩種使用方法

    1.

//set value
localStorage.name="rogue";
localStorage.age="secret";
//get value
document.write(localStorage.name); // get "rogue"
alert(localStorage.age);  //get "secret"

    此方法簡單易用，比較流行常用。手機測試沒出現什么問題。

    2.

//set value
 localStorage.setItem("name","rogue");
 localStorage.setItem("age","secret");
//get value
document.write(localStorage.getItem("name")); //get "rogue" string
alert(localStorage.getItem("age")); //get "secret"

    此方法由于比方法1要多書寫N個字母，so使用不是很廣泛。

    方法1與方法2可單用，可混用，測試大部分手機，沒發現問題。

    注意

    不論用何種方法存儲數據，官方給出的說法是數據存儲沒有任何限制，在第二天、第二周或下一年之后，數據依然可用。但是移動端經測試數據仍然會存在丟失的情況，經過N久排查最終找到原因:

    測試發現，當android或ios設備在不同網絡環境下連續切換兩次，localStorage存儲的數據就會丟失。舉個栗子，你的iphone在3g網絡下玩過網頁版2048然后暫時存儲了部分數據（最高分，游戲當前狀態等），切換到wifi環境下重新打開此網頁數據還在，再次切換到3g網絡所有的localStorage數值對全部神奇的disappear了。所以說官方很多時候是靠不住的，真機測試才是王道。

    測試機包括：android4.0以上機器十幾臺、ios5.0設備一臺、ios7.1設備一臺

    （本文僅代表個人觀點，如有錯誤，請評論指正，謝謝）