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设备一台

    （本文仅代表个人观点，如有错误，请评论指正，谢谢）