可以看一下《JavaScript本地存储实践(html5的localStorage和ie的userData)
sessionStorage和上文中提到的localStorage非常相识,方法也几乎一样:

非常通俗易懂的接口:

  • sessionStorage.getItem(key):获取指定key本地存储的值
  • sessionStorage.setItem(key,value):将value存储到key字段
  • sessionStorage.removeItem(key):删除指定key本地存储的值
  • sessionStorage.length是sessionStorage的项目数

直接上demo:http://www.css88.com/demo/sessionStorage/

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时,之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
[code=”javascript”]
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
[/code]

sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据,比如localStorage.clear(),它将删除所有同源的本地存储的localStorage数据,而对于Session Storage,它只清空当前会话存储的数据。

关闭页面会导致 sessionStorage 的数据被清除,但刷新或重新打开新页面数据还是存在,如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。

sessionStorage 和 localStorage具有相同的方法storage事件,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:

    • storageArea: 表示存储类型(Session或Local)
    • key:发生改变项的key
    • oldValue: key的原值
    • newValue: key的新值
    • url*: key改变发生的URL

* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.

sessionStorage html5客户端本地存储之sessionStorage及storage事件的更多相关文章

  1. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  2. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  3. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  4. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  5. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  6. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  7. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  8. HTML5之本地存储localstorage

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

  9. Html5 web本地存储

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

随机推荐

  1. MyBatis返回主键

    网上给的例子都很简单 , 只要用useGeneratedKey就行了. @Insert({ "INSERT INTO money_record_increasement (id, creat ...

  2. MySQL优化技巧之四(数据库设计中的一些技巧)

    1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...

  3. Python多个版本安装!

    Python可以同时安装多个版本,目前我安装的是3.6和3.5,在Eclipse中使用3.6:在Visual Studio中使用3.5.如何让哪个版本的Python成为系统默认的解释器呢?通过调整不同 ...

  4. minicom的安装及使用

    1.下载 sudo apt-get install minicom 2.运行 sudo minicom -s 3.修改端口 首先查看端口:ls /dev/tty...

  5. expdp导出数据库

    源地址:http://www.cnblogs.com/luluping/archive/2010/03/16/1687093.html 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客 ...

  6. 微信用户授权,取openid

    var appid = "wxb5f2540cff5c72be"; var secret = "3de016d0c294b82a5c74ce3fc4865271" ...

  7. 有向无环图(DAG)的最小路径覆盖(转)

    DAG的最小路径覆盖 定义:在一个有向图中,找出最少的路径,使得这些路径经过了所有的点. 最小路径覆盖分为最小不相交路径覆盖和最小可相交路径覆盖. 最小不相交路径覆盖:每一条路径经过的顶点各不相同.如 ...

  8. jdbc调用sparksql

    将hive-site.xml拷贝到spark目录下conf文件夹 local模式 spark-sql --driver-class-path /usr/local/hive-1.2.1/lib/mys ...

  9. JSP SQL注入

    Login.JSP <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  10. 函数变量作用域(python)

    收集参数:该参数个数不确定 >>> def test(*params): print('参数的长度是:', len(params)); print('第二个参数是:', params ...