HTML5 Storage API-阿里云开发者社区

开发者社区> 杰克.陈> 正文

HTML5 Storage API

简介: 原文:HTML5 Storage API Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多。  在Web Storage出现之前,远程的Web服务器需要存储客户端和服务器间交互使用的所有相关数据。
+关注继续查看
原文:HTML5 Storage API

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多。 

在Web Storage出现之前,远程的Web服务器需要存储客户端和服务器间交互使用的所有相关数据。cookie是一个在服务器和客户端间来回传送文本值的内置机制。服务器可以基于其放在cookie中的数据在不同web页面间跟踪用户的信息。用户每次访问某个域是,cookie数据都会被来回传送。

尽管cookie无处不在,但它还是有一些总所周知的缺点:

1)cookie的大小受限制,cookie大小被限制在4KB,不能接受像文件或邮件那样的大数据。

2)只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。一方面,这意味着cookie数据在网络上是可见的,不加密的情况下有安全风险;另一方面,无论加载哪个相关url,cookie中的数据都会消耗网络带宽。

Web Storage出现之后,开发者可以将需要跨请求重复访问的数据直接存储在客户端的浏览器中(开发者也可以将数据存储在javascript对象中,对象在页面加载时保存,并且容易获取),还可以在关闭浏览器很久之后再次打开时恢复数据,以减少网络流量。


Web Storage又分为两种: 
sessionStorage 
localStorage 
key和value都必须为字符串,换言之,web Storage的API只能操作字符串。 

Web Storage API检查浏览器的支持性

检测window.sessionStorage和window.localStorage是否存在

 

设置和获取数据

sessionStorage.setItem("myFirstKey","myFirstValue");或者sessionStorage.myFirstKey = myFirstValue;或者sessionStorage["myFirstKey"] ="myFirstValue";

获取数据

sessionStorage.getItem("myFirstKey");

删除数据

sessionStorage.removeItem("myFirstKey");

删除存储列表中的所有数据

sessionStorage.clear();

 

设置和获取的调用不必要出现在同一个网页上,只要网页是同源的(规则、主机和端口)基于相同的键,我们都能够在其他网页中获取设置在sessionStorage。大部分开发者对页面重新加载时丢失脚本数据的问题已经习以为常,但是通过Web Storage API保存的数据在重新加载页面之后数据仍然存在。

当用户关闭窗口或浏览器,sessionStorage数据将会被清除

localStorage 

localStorage 和sessionStorage的区别在于访问它们的名称不同,分别是通过localStorage 和sessionStorage对象来访问它们,两者的行为上的差异主要是数据的保存时长及它们的共享方式

sessionStorage localStorage

数据会保存在存储它的窗口或标签页关闭时

(浏览器刷新时可以存储数据,浏览器关闭时不可以)

数据的生命期比窗口或浏览器的生命期长
数据只在构建它们的窗口或者标签页内可见 数据可被同源的每个窗口或者标签页共享

 

 将数据存储在本地客户端,进而从本地而不是远程获取数据,即可以降低网络流量,又可提升浏览器的响应速度。

一个困扰开发人员的常用问题是,当用户从应用程序的一个页面切换到另外一个页面时如何管理数据。传统的实现方法是有服务器存储数据,当用户在网页间切换时来回传递数据。还有一种做法是应用程序尽可能让用户停留在一个动态更新的网页上。不过用户更喜欢在页面间切换。

 

演示地址:http://lovermap.sinaapp.com/test/storage.html

 

JSON对象的存储

虽然HTML5 Web Storage规范允许将任意类型的对象保存为键-值对形式。实际情况是一些浏览器将数据限定为文本字符串类型。现代浏览器原生支持JSON。我们可以通过序列化复杂对象将JSON数据保存到Storage中,以实现复杂数据类型的持久化。

var data;
function loadData(){
    data = JSON.parse(sessonStorage['myStorage']);
}
function saveData(){
    sessonStorage['myStorage'] = JSON.stringify(data);//对象转变成字符串
}
window.addEventListener("load",loadData,true);
window.addEventListener("unload",loadData,true);

 

 

 



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8044 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9476 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5509 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
4048 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1152 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3462 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
17176 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载