Web Storage是HTML5 API提供一个新的重要的特性;

最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储;

目前主要的浏览器已经支持该功能;

常见的web客户端数据存储比较:

Html5 Web Storage非常易于Web开发者使用,他提供了非常简单的获取或设置key-value对的API;

支持的数据大小由网页浏览器厂商来决定,大多数支持都是5M或10M以上;

这就意味着,我们可以在客户端存储更多有关用户及会话的信息,诸如用户个人设置、本地化数据、离线数据等;

Web Storage存储的数据可能用javascript来进行访问;

Web Storage对象主要分为两种类型:sessionStorage and localStorage;

sessionStorage:是针对用户执行单个事务的方案而设计的,仅在单个窗口同源标签会话范围内是有效的。所以当窗口关闭时,数据也会删除;

localStorage:是跨多个窗口(同源页面),且持续范围可超过当前会话;意味着当浏览器关闭再重新打开,数据依然是可用的;

这两种类型的对象,在不同的浏览器之间访问数据是无效的;例如,我们在Firefox中创建localStorage,要在IE中去访问,是访问不到数据的;

Storage只能存储key/value对,而且只支持字符串类型的数据;如果你想保存其它类型的数据,在保存的时候就需要转化成字符串,在读取时,再转化回来;

它保存的数据并不进行加密,所以虽然web Storage功能很强大,但也不宜保存比较敏感的数据;

Web Storage支持的属性与方法:

Web Storage支持storage事件:

当web storage中的数据被保存后,修改或删除数据,都会触发Storage事件。

触发该事件对象,包含了触发对象,URL及key/value变化前后的键值。

虽然规范里要求Storage事件在同一个浏览器里能被所有的窗口或者标签页触发,但是该功能目前只有少数的浏览器支持。

Storage Event支持的属性有:

HTML5 Web Storage的更多相关文章

  1. HTML5 Web Storage使用实例

    很久没写文章了,忙加懒实在没办法,之前也看过关于Web Storage的文章,当时就觉得各各浏览器的支持跟上来还早着呢,像我们这样做门户网站的一时半会儿也用不上,毕竟用户群体鱼目混杂嘛,最近各各浏览器 ...

  2. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  3. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  4. HTML5 Web Storage概述

    Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...

  5. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  6. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  7. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  8. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

  9. Web Storage中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

随机推荐

  1. html CSS 学习总结

    HTML文件格式 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=" ...

  2. javascript模块化应用

    这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...

  3. web.xml的一份配置(备忘)

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java ...

  4. set的用法

    set提供一个不重复元素的集合,一般不能直接修改元素.因为这样可能会造成重复元素因此必须删除旧元素,再插入新元素.看下面程序:分析每句的功能.#include<set>#include&l ...

  5. cloudsim安装,配置(到eclipse)

    现在基本成功了.所以将这个过程尽量详细的,准确的分享出来,以供大家的需要.       一.Jdk,Eclipse的安装与配置. 本人下载的jdk版本是1.8,jdk的相关配置网上有很多,我就不赘述了 ...

  6. bzoj4562: [Haoi2016]食物链--记忆化搜索

    这道题其实比较水,半个小时AC= =对于我这样的渣渣来说真是极大的鼓舞 题目大意:给出一个有向图,求入度为0的点到出度为0的点一共有多少条路 从入读为零的点进行记忆化搜索,搜到出度为零的点返回1 所有 ...

  7. jquery ui dialog去掉右上角的叉号

    var dialog = $("#id").dialog({ resizable:false, height:, width:, zIndex:, modal:true, open ...

  8. Myeclipse8.5 subscription expired自己动手获取Myeclipse的注册码

    步骤: 1.在myeclipse中新建一个java project 2.在src目录下建立一个名为MyEclipseGen的类 3.将下面的代码复制到该类中,并运行. import java.io.* ...

  9. 【iCore3 双核心板_ uC/OS-III】例程十一:任务消息队列

    实验指导书及代码包下载: http://pan.baidu.com/s/1pLQYiE3 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. 现在写 PHP,你应该知道这些

    现在写 PHP,你应该知道这些 2015-10-21    分类:WEB开发.编程开发.首页精华2人评论     来源:Scholer's Blog 分享到:更多3 二十万年薪PHP工程师培养计划 成 ...