欢迎访问 licqi IT技术
我们一直在努力

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

(本文仅代表个人观点,如有错误,请评论指正,谢谢)


赞(0) 打赏
未经允许不得转载:licqi IT技术 » html5 localStorage 实用
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏