首先您可以看一下《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可以方便的实现存储的数据遍历,例如下面的代码:

1 var storage = window.localStorage;
2 for (var i=0, len = storage.length; i < len; i++){
3 var key = storage.key(i);
4 var value = storage.getItem(key);
5 console.log(key + "=" + value);
6 }

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事件,这看起来似乎更 让人想的通些.

直接上demo,同事打开这两个页面(代码一模一样):

http://www.css88.com/demo/sessionStorage/index2.html

http://www.css88.com/demo/sessionStorage/index3.html

感谢:Mr.Prime在storage事件上给予的帮助,另外推荐一下他写的关于storage的博文:http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

转载于:https://www.cnblogs.com/shihao/archive/2011/12/23/2298854.html

html5客户端本地存储之sessionStorage及storage事件相关推荐

  1. Html5 web本地存储

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

  2. HTML5之本地存储localstorage

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

  3. HTML5的本地存储详解

    为什么80%的码农都做不了架构师?>>>    Html5 学习系列(六)Html5本地存储和本地数据库 一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端 ...

  4. HTML5 LocalStorage 本地存储

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  5. html5有本地存储吗,HTML5的本地存储

    HTML5的存储方式 HTML5给我们提供了新的存取本地数据的方法. 在HTML5之前,存储主要是放在cookie文件中.但是cookie文件有其自身的局限性. cookie文件每次请求的时候都会发送 ...

  6. HTML5 LocalStorage 本地存储原理详解

    说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太 ...

  7. 本地存储之sessionStorage

    源码可以到GitHub上下载! sessionStorage: 关闭浏览器再打开将不保存数据 复制标签页会连同sessionStorage数据一同复制 复制链接地址打开网页不会复制seessionSt ...

  8. HTML5客户端数据存储机制Web Storage和Web SQL Database

    引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...

  9. 客户端本地存储的比较及使用window.name数据传输

    一:cookie: 1. 什么是cookie? Cookie是在客户端用于存储会话信息的,用户请求页面在web服务器与浏览器之间传递.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cooki ...

最新文章

  1. 10行代码带你搞定目标检测(附代码)
  2. 【408预推免复习】计算机组成原理之CPU的结构和功能
  3. 图片标签|| 列表标签||链接标签||div和span|| 语义化标签
  4. HoloLens开发手记- SpectatorView for iOS编译指南
  5. pytorch加载的模型测试的结果和保存时测试的结果不一致
  6. 从lambda表达式看final关键字
  7. java 通过模板替换pdf_word模板替换方案 PDF 下载
  8. 里程碑式突破!我国量子计算原型机“九章”问世
  9. 124第十四章—权限的配置
  10. 数据结构_C语言_实验二_树 ——还原二叉树
  11. GO超详细基础语法黑点
  12. JavaScript 误区
  13. 18-黑马程序员------OC语言学习笔记---封装
  14. centos5.5安装csvn,以及问题处理
  15. nx零件库插件_支持Fusion 360软件的3DSource零件库插件发布
  16. PS之制作圆角的白色边框图和白色底图
  17. 打印正六边形(C语言)
  18. 百度前端技术体系——百度EFE(Excellent FrontEnd)技术体系
  19. 硬件工程师成长之路(3)——PCB设计
  20. HTML+CSS的基础复习篇~

热门文章

  1. [Qt教程] 第35篇 网络(五)获取本机网络信息
  2. 锦州中学高考2021成绩查询,锦州高中成绩排名2021,锦州中考分数线排行榜
  3. Jfinal 对象列表返回前台json数据
  4. 解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(12
  5. 2019牛客暑期多校训练营(第四场)I - String (后缀自动机+回文树)
  6. mysql 特殊函数_MySQL中sleep函数的特殊现象示例详解
  7. java 万年历_非常实用的java万年历制作方法
  8. tf报错 之 assertion failed: [Need value.shape >= size, got ] [336 210 3] [224 224 3]
  9. html代码class=,css class是啥?
  10. 2vec需要归一化吗_LTSM模型预测数据如何归一化?(知乎回答)