文档章节

HTML5 高级系列:web Storage

达时索
 达时索
发布于 2017/04/28 09:29
字数 857
阅读 4
收藏 0

前言

HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。

这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。

localStorage 的数据保存在本地硬件上,可以永久保存,可以手动调用api清除数据。sessionStorage 保存在 session 对象中,会在浏览器关闭时被清除。

web Storage 的大小在浏览器上是有限制的,不同浏览器大小会有区别,在主流浏览器中,大小约为 5M,用来存储普通数据其实已经足够。

用法

以localStorage 为例,sessionStorage用法一样:

setItem

保存数据:localStorage.setItem(key,value);

示例:

localStorage.setItem('name','Hello World');

当 key 相同时会覆盖之前的 value,用于修改数据。如果 value 为对象,需转为 json 字符串,否则你读取出来的将会是 [object Object]

getItem

读取数据:localStorage.getItem(key);

示例:

localStorage.getItem('name'); // Hello World

removeItem

删除单个数据:localStorage.removeItem(key);

示例:

localStorage.removeItem('name');

localStorage.getItem('name'); // null

删除 key 为 name 的数据后,loaclStorage 里已经获取不到该数据,则返回 null;

clear

删除所有数据:localStorage.clear();

示例:

localStorage.clear();

此时会把localStorage 中的所有数据都删除。

key

得到某个索引的key:localStorage.key(index);

示例:

localStorage.setItem('name1','Hello World');

localStorage.setItem('name2','Hello Linxin');

localStorage.key(1); // name2

获取到索引为 1 的 key,即 name2。

构造函数

在实际项目中,可能需要多次对 localStorage 进行操作,我们可以通过一个构造函数来更好的操作。

示例:

var localEvent = function (item) {

this.get = function () {

returnlocalStorage.getItem(item);

}

this.set = function (val) {

localStorage.setItem(item, val);

}

this.remove = function () {

localStorage.removeItem(item);

}

this.clear = function () {

localStorage.clear();

}

}

// 使用new字符把构造函数实例化出多个对象

var local1 = new localEvent('name1');

var local2 = new localEvent('name2');

local1.set('Hello World');

local2.set('Hello Linxin');

local1.get(); // Hello World

local2.get(); // Hello Linxin

这里只是简单的演示,像我们平时在项目中可能要把对象存储起来,就需要在代码里做些处理。

监听storage 事件

可以通过监听 window对象的 storage 事件并指定其事件处理函数,当页面中对 localStorage 或 sessionStorage 进行修改时,则会触发对应的处理函数。

window.addEventListener('storage',function(e){

console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);

})

触发事件的时间对象(e 参数值)有几个属性:

key : 键值。

oldValue : 被修改前的值。

newValue : 被修改后的值。

url : 页面url。

storageArea : 被修改的 storage 对象。

注意:在谷歌浏览器中,需要在不同标签页中修改 storage 才会触发该事件,即网页A 监听该事件,在网页B 中修改 localStorage,则网页A 会触发事件函数。但是在 IE 中,在同个网页修改 localStorage 都会触发该事件。

调试

谷歌浏览器自带调试工具(chrome devtools)非常好用,可以用来调试 localStorage 和 sessionStorage。打开浏览器按f12调出调试工具,可以看到 Application ,点击打开可以看到左边栏有 Storage,包括了 localStorage、sessionStorage、IndexedDB等,选中我们要调试的网站域名,可以看到右边有对应的 key 和 value,可以通过右键进行编辑或删除等。

兼容

IE8 以上就兼容,但是比较特别,需要在服务器上打开的才支持,直接双击打开文件的 file:// 是不兼容的。

到了 IE11 才支持 file:// 下打开的,其他浏览器的支持程度都很高,包括在手机上的兼容。

本文转载自:http://www.toutiao.com/a6413134521549979906/

共有 人打赏支持
达时索
粉丝 0
博文 11
码字总数 1083
作品 0
普陀
程序员
HTML5 高级系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。 localStora...

课工场CC老师
2017/10/26
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
0
0
localstorage、sessionstorage的用法

html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话...

韦姣敏
2017/11/04
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway真的有那么差吗?

前言 Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版的Zuul 2在经过了多次跳票之后,对于Spring这样的整...

Java小铺
33分钟前
1
0
SpringBoot远程调试,远程debug你的线上项目

开发环境中代码出错了,可以利用IDE的debug功能来进行调试。那线上环境出错呢? 一、假设我们的项目是部署在tomcat中,那我们就需要对tomcat进行一定对配置,配置如下。 1. windows系统中,找...

nonnetta
38分钟前
0
0
JAVA秒杀优化方向

秒杀优化方向 将请求尽量拦截在系统上游:传统秒杀系统之所以挂,请求都压倒了后端数据层,数据读写锁冲突严重,几乎所有请求都超时,流量虽大,下单成功的有效流量甚小,我们可以通过限流、...

小贱是个程序员
45分钟前
0
0
C# 统计字符串中大写字母和小写字母的个数

static void Main() { int count1 = 0; int count2 = 0; Console.WriteLine("请输入字符串"); string str = Convert.ToString(Consol......

熊二的爸爸是谁
48分钟前
0
0
分布式服务框架之远程通讯技术及原理分析

在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是...

老道士
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部