HTML5中的storage 如何使用

时间: 2019-03-24阅读: 704标签: 存储
html5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享,对storage的概念及用法应该都能掌握个七七八八了。

html5中,你可以吧storage 想象成是储存在客户端(浏览器)中的一些 JavaScript 对象,那么有什么用呢?举个简单的例子,百度搜索会把你每次的搜索关键字用 storage(localStorage) 存储下来,那么下次你再搜索相同的内容的时候,它会优先将你曾经搜过的内容进行下拉展示。 关于 storage 的内容,可以用 chrome 下的 Resources 面板进行查看。


方法:

1、clear() 删除所有值。ff 没有实现 
2、getItem(name) 根据指定的名字 name 获取对应的值 
3、key(index) 获得 index 位置处的值的名字 
4、removeItem(name) 删除由 name 指定的名值对
5、setItem(name, value) 为指定的 name 设置一个对应的值

也可以用点语法和方括号语法来访问设置,但是建议用上面的方法。除此之外,还需要注意的一点就是 value 必须是字符串 。


sessionStorage

顾名思义,sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭,或者更准确地说是保持到该页面标签关闭为止。对于同一个页面,在不同标签中打开,是拥有不同的 sessionStorage 对象的,而如果相同页面,刷新后,sessionStorage 对象也会重新开始。

// 设置
sessionStorage.setItem('name', 'maiziedu');
sessionStorage.age = '10';
// 读取
var name = sessionStorage.getItem('name'); // maiziedu
var age = sessionStorage.age; // 10
// 遍历
for (var i = 0, len = sessionStorage.length; i < len; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
console.log(key, value);
}
// age 10
// name maiziedu
// 也可以用 for in
for (var key in sessionStorage) {
console.log(key, sessionStorage.getItem(key));
}
// 删除
delete sessionStorage.name;
sessionStorage.removeItem('age');

因为 sessionStorage 对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。
sessionStorage 对象主要用于仅针对会话的小段数据的存储,如果需要跨域会话存储数据,那么就要使用 localStorage 了。


localStorage

localStorage 和 sessionStorage 大抵相同。可以多页面访问同一个 localStorage 对象,但是页面必须来自同一域名(子域名无效),使用同一种协议,同一个端口(同源策略)。至于 localStorage 的使用方法,可以参考上面 sessionStorage 的使用。
Storage 事件
对 Storage 对象进行任何修改,都会在文档上触发 Storage 事件。当通过属性或 setItem() 方法保存数据,使用 delete 操作符或者 removeItem() 删除数据,或者调用 clear() 方法时,都会发生该事件。这个事件的 event 对象有如下属性:
1、domain 发生变化的存储空间的域名
2、key 设置或者删除的键名
3、newValue 如果是设置值,则是新值;如果是删除键,则是 null
4、oldValue 键被更改之前的值
遗憾的是,webkit(chrome)还不支持这个事件,尽管 IE8 以及 ff 支持其部分属性,但因为 chrome 的不支持,注定其到目前为止还无法广泛使用。

EventUtil.addHandler(document, 'storage', function(e) {
  console.log(e.domain, e.key, e.newValue, e.oldValue);
});


以上就是html5中,涉及到的storage相关内容及其使用方法,如果大家在前端开发中,需要实现上述功能,不妨可以试试上述方法。  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2517

关闭

H5的sessionStorage和localStorage

H5 新增的 sessionStorage 和 localStorage 的区别:sessionStorage 和 java 的 session 差不多,可以短时间存储信息,电脑浏览器常用sessionStorage 存储用户登录信息,localStorage 可以永久保留用户信息,不用每次都登录,常用于APP

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

Web 存储技术

第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件

Cookie、Session与Token

Cookie是一个http请求首部,当服务端响应头上标记着setCookie时,可以设置此cookie到当前域名下;session实际上是一种概念,表示每次会话服务器存储的用户信息

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

nodejs如何将获得的数据保存到本地?

nodejs将获得的数据保存到本地可以使用Cookie进行数据保存或使用sessionStorage、localStorage进行数据保存。Cookie这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

本地化存储Storage

Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一种在cookie之外存储会话数据的途径和提供一种可以大量跨会话存在的数据机制

ES6封装H5本地存储localStorage、sessionStorage

localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

前端 cookie与本地存储与实践

一个项目考虑缓存和不考虑缓存完全是两个难度,在用户体验上也截然不同。考虑缓存肯定得了解web本地存储与它们的区别和适用场景。正好这次负责一个项目,在做了这个项目后抽空给大家来一次总结,希望能给大家带来帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!