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);
HTML5 Storage API的更多相关文章
- 一篇文章图文并茂地带你轻松学会 HTML5 storage
html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...
- [转]使用 HTML5 IndexedDB API
本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 ...
- web API简介(三):客户端储存之Web Storage API
概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
- 使用HTML5 WebStorage API构建与.NET对应的会话机制
HTML5的Web Storage API,我们也称为DOMStarage API,用于在Web请求之间持久化数据.在Web Starage API 出现之前,我们都是将客户端和服务端之间的交互数据存 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- 开大你的音响,感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
随机推荐
- struts2错误验证
在登陆的时候一般要用错误验证功能.效果如图: 在action层的写法: this.addActionError("username或password错误"); 在jsp页面上取值: ...
- ThinkPHP 自动创建数据、自动验证、自动完成详细例子介绍(十九)
原文:ThinkPHP 自动创建数据.自动验证.自动完成详细例子介绍(十九) 1:自动创建数据 //$name=$_POST['name']; //$password=$_POST['password ...
- 玩转Windows服务系列——命令行管理Windows服务
原文:玩转Windows服务系列——命令行管理Windows服务 说到Windows服务的管理就不得不说通过命令行的方式管理Windows服务,因为无论是系统管理员,还是通过编程的方式调用cmd命令, ...
- iOS_10_tableView的简单使用_红楼十二钗
终于效果图: 方式1,用字典数组 BeyondViewController.h // // BeyondViewController.h // 10_tableView // // Created b ...
- 【机器学习】SVM核函数
知识预备 1. 回顾:logistic回归出发,引出了SVM,即支持向量机[续]. 2. Mercer定理:如果函数K是上的映射(也就是从两个n维向量映射到实数域).那么如果K是一个有效核函数(也称 ...
- OCA读书笔记(17) - 移动数据
Sql*load 1. sql*loader的文件有哪些? 日志文件:概述了作业的成功与失败以及所有相关错误的细节 错误文件(bad file):从输入文件中抽取的行可能会被sqlldr丢弃(原因可能 ...
- C++&&Mysql&&codeblocks
#include <iostream> #include <stdio.h> #include <winsock2.h> #include <mysql.h& ...
- Appium介绍
Appium介绍 Appium是一个移动端的自动化框架,可用于测试原生应用,移动网页应用和混合型应用,且是跨平台的.可用于IOS和Android以及firefox的操作系统.原生的应用是指用andro ...
- redis做RDB时请求超时case
近期在排查redis做rdb时会有部分请求超时的case.初步推断是我们redisserver上开启了THP(Transparent Huge Pages). 1) Linux本身的 ...
- Struts2第一个工程helloStruts极其基本配置
前面已经准备好了Struts-2.3.15,现在就可以直接搭建Struts2的工程了.前面http://blog.csdn.net/huangchnegdada/article/details/917 ...