HTML5本地化应用开发-HTML5 Web存储详解

文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的。我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成。如有转载,请声明出处。

介绍

我们把数据存储在浏览器,一直使用的Cookie,但其实Cookie是有很多数量和大小的限制的。现在我们不用考虑这些了,我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。

背景

虽然Web存储已经有了自己的规范((http://dev.w3.org/html5/webstorage/) ),并且也在独立于Html5进行开发。但Web存储通常是集中在HTML5技术之下的。

不像cookie一样,数据存储在Web Storage意味着客户端不在请求服务器了。通常情况下,在浏览器和服务器来回的传递数据用的是HTTP request,这限制了如果要在客户端存储大量数据,必须使用Cookie,但是如果服务器端用不到Cookie。而在请求时,也会把Cookie发送到服务器,浪费了大量带宽。并且浏览器强制限制了Cookie的大小和数量,在一个相同的域名上,你可以存储不多于50个cookie和4KB的大小。

使用Web Stroage就会解决以上两个问题。首先,它不会离开浏览器,其次,也允许存储更多更大的数据。W3C推荐限制在5MB之内,但是如果用户需要更多的存储,是可以在浏览器中进行设置的。当前一般浏览器会允2MB的容量。

还有另外一种存储方式就是FileSystem API (www.w3.org/TR/file-system-api/)。简单来水就是使用此api可以进行文件的读写操作,目前来说谷歌浏览器是当前兼容此功能的。

当然如果你对数据库感兴趣的话,你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/),这个api提供了可以存储大量存储内容数据的能力。目前为止,只有火狐、谷歌、IE10以上支持。

使用Web Storage

Web Storage主要包括本地存储和基于Session的存储。它是在域名之上的。如果你不删除这些存储,它是会一直存在的。

如果你想添加和修改数据,使用下面的Api:

localStorage.setItem(“mydata”,”this is a data”);

获取数据:var dat = localStorage.getItem(“mydata”);

当然下面的形式也可以使用的:

第一种:

var data = localStorage["myData"];

localStorage["mydata"] = “this is a data”;

第二种:

var data = localStorage.mydata;

localStorage.mydata = “this is a data”;

删除数据:

删除指定名称的数据:localStorage.removeItem(‘mydata’);

删除所有Web Storage中的数据:localStorage.clear();

可以存储的数据类型

Web Storage只能够存取字符串数据,所以如果你想存取更多的数据的话,你可以使用json对象,把它转换为json字符串。

var data = {“key”:”value”,”key1″:”value1″};

localStorage.setItem(“mydata”,JSON.stringify(data));

当你需要读取数据的时候可以把json解析成对象:

var data = JSON.parse(localStorage.mydata);

WebStorage的数量:localStorage.length.

获取索引的键:

var key =localStorage.key(0);//获取索引为0的键

var data = localStoragegetItem(key);获取值

通过循环我们就可以查找到存储的所有键值对了。

sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于会话级别的。

微信号:net4k8k(做(4k+8k)+月薪的程序员)

微信名称:net知识分享

介绍:主要以发布和分享.Net和安卓文章为主,争做全栈开发工程师,爱学习,爱挑战,爱编程。

打造C#入门教程。总结自己已经习得的技术体系。分享到网络。为中国的软件复兴贡献自己的一份力。

如有不恰当之处,还请指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Redis在游戏服务器中的应用

排行榜 游戏服务器中涉及到很多排行信息,比如玩家等级排名、金钱排名、战斗力排名等。 一般情况下仅需要取排名的前N名就可以了,这时可以利用数据库的排序功能,或者自...

523120
来自专栏wOw的Android小站

[iOS] 技术文章收藏

现在关注了一些微博,订阅号,博客。每天都能看到不少好文章。现在收藏夹里放了不少文章,我觉得是时候整理一下,把文章分各类,做个目录出来,方便以后查阅。

8710
来自专栏野路子程序员

徒手解剖composer,简单了解其实现过程

30760
来自专栏Python中文社区

用Python获取磁力种子

陈键冬,Python中文社区专栏作者,pyecharts开源项目核心开发者,github id:chenjiandongx

44280
来自专栏FreeBuf

ASLRay:一个可以绕过ASLR的工具

ASLR(Address Space Layout Randomization,即地址空间格局随机化)是指利用随机方式配置数据地址,一般现代系统中都加设这一机制...

23980
来自专栏AI2ML人工智能to机器学习

Shiny: R语言来建立开源交互式数据分析微服务的神器

先来说个应用场景: 假设你需要快速Prototype一个数据分析的服务, 而且需要给业务客户一定的自由度来理解数据分析的强大, 例如更换数据, 更换分析手段。 ...

24130
来自专栏Golang语言社区

谈谈go语言编程的并发安全

问题起因 在分布式存储开源项目 Weed-FS 中, 我发现了一个地方非并发安全(not concurrency-safety), 所以提交了一个 Weed-F...

43960
来自专栏IT派

10 个技巧,让你更专业地使用 console 进行 JS 调试

首先,我必须承认这一点,我将利用这个平台从我的开发环境中清理出骨架(轮廓)。有时候,我所做的“魔法”(有些人称之为“编码”),并不像我的同事在为他们展示这些宏伟...

11900
来自专栏编程

三种主流Web架构

往期精选 做WEB好几年了,各种语言和技术都稍有涉猎。今天心血来潮,突然想总结一下。其实不论什么技术,什么需求,通常WEB开发就是通过WEB前端管理一个或大或小...

73870
来自专栏宏伦工作室

基于itchat实现微信群消息同步机器人

49170

扫码关注云+社区

领取腾讯云代金券