html5客户端本地存储之sessionStorage及storage事件
首先您可以看一下《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事件相关推荐
- Html5 web本地存储
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5之本地存储localstorage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5的本地存储详解
为什么80%的码农都做不了架构师?>>> Html5 学习系列(六)Html5本地存储和本地数据库 一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端 ...
- HTML5 LocalStorage 本地存储
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- html5有本地存储吗,HTML5的本地存储
HTML5的存储方式 HTML5给我们提供了新的存取本地数据的方法. 在HTML5之前,存储主要是放在cookie文件中.但是cookie文件有其自身的局限性. cookie文件每次请求的时候都会发送 ...
- HTML5 LocalStorage 本地存储原理详解
说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太 ...
- 本地存储之sessionStorage
源码可以到GitHub上下载! sessionStorage: 关闭浏览器再打开将不保存数据 复制标签页会连同sessionStorage数据一同复制 复制链接地址打开网页不会复制seessionSt ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- 客户端本地存储的比较及使用window.name数据传输
一:cookie: 1. 什么是cookie? Cookie是在客户端用于存储会话信息的,用户请求页面在web服务器与浏览器之间传递.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cooki ...
最新文章
- 10行代码带你搞定目标检测(附代码)
- 【408预推免复习】计算机组成原理之CPU的结构和功能
- 图片标签|| 列表标签||链接标签||div和span|| 语义化标签
- HoloLens开发手记- SpectatorView for iOS编译指南
- pytorch加载的模型测试的结果和保存时测试的结果不一致
- 从lambda表达式看final关键字
- java 通过模板替换pdf_word模板替换方案 PDF 下载
- 里程碑式突破!我国量子计算原型机“九章”问世
- 124第十四章—权限的配置
- 数据结构_C语言_实验二_树 ——还原二叉树
- GO超详细基础语法黑点
- JavaScript 误区
- 18-黑马程序员------OC语言学习笔记---封装
- centos5.5安装csvn,以及问题处理
- nx零件库插件_支持Fusion 360软件的3DSource零件库插件发布
- PS之制作圆角的白色边框图和白色底图
- 打印正六边形(C语言)
- 百度前端技术体系——百度EFE(Excellent FrontEnd)技术体系
- 硬件工程师成长之路(3)——PCB设计
- HTML+CSS的基础复习篇~
热门文章
- [Qt教程] 第35篇 网络(五)获取本机网络信息
- 锦州中学高考2021成绩查询,锦州高中成绩排名2021,锦州中考分数线排行榜
- Jfinal 对象列表返回前台json数据
- 解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(12
- 2019牛客暑期多校训练营(第四场)I - String (后缀自动机+回文树)
- mysql 特殊函数_MySQL中sleep函数的特殊现象示例详解
- java 万年历_非常实用的java万年历制作方法
- tf报错 之 assertion failed: [Need value.shape >= size, got ] [336 210 3] [224 224 3]
- html代码class=,css class是啥?
- 2vec需要归一化吗_LTSM模型预测数据如何归一化?(知乎回答)