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 valuelocalStorage.name="rogue";localStorage.age="secret";//get value[xss_clean](localStorage.name); // get "rogue"alert(localStorage.age);  //get "secret"

此方法简单易用，比较流行常用。手机测试没出现什么问题。

2.

//set value localStorage.setItem("name","rogue"); localStorage.setItem("age","secret");//get value[xss_clean](localStorage.getItem("name")); //get "rogue" stringalert(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设备一台

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