html5localStorage实用

    html5的很多方法现在支持情况都越来越好了,特别是在移动端。最近做移动端小游戏用到localStorage,特将使用方法和遇到的问题加以说明。

澄迈ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

    简介

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

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

    

    

html5 localStorage 实用


网页题目:html5localStorage实用
文章URL:http://pwwzsj.com/article/jgjopj.html