文档章节

HTML5 高级系列:web Storage

达时索
 达时索
发布于 2017/04/28 09:29
字数 857
阅读 4
收藏 0
点赞 0
评论 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:// 下打开的,其他浏览器的支持程度都很高,包括在手机上的兼容。

© 著作权归作者所有

共有 人打赏支持
达时索
粉丝 0
博文 11
码字总数 1083
作品 0
普陀
程序员
HTML5学习之Web Storage基础知识

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

CHIEMINCHAN ⋅ 05/11 ⋅ 0

HTML5 进阶系列:web Storage

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

林鑫 ⋅ 2017/04/26 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

HTML5 本地存储Web Storage

Web Storage 功能,顾名思义,就是在web上针对客户端本地存储数据的功能,具体来说Web Storage 分为两种: sessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站中...

nao ⋅ 2015/12/11 ⋅ 0

HTML5 本地存储

HTML5的本地化存储标准主要有以下3类: (1) Web Storage (2) Web SQL Database (3) IndexedDB 一、Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范,IE 8+、FF 3.5+、Safar...

Aaron_DMC ⋅ 2016/11/21 ⋅ 1

HTMl5的sessionStorage和localStorage

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

lg2045 ⋅ 2014/10/09 ⋅ 0

HTML5在客户端存储数据的新方法——localStorage

HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。 ...

祈澈姑娘 ⋅ 2017/12/19 ⋅ 0

HTMl5的sessionStorage和localStorage的使用

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

刘阳0292 ⋅ 2017/07/09 ⋅ 0

Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

HTML5本地存储之Web Storage篇

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

zh151832 ⋅ 2016/03/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Windows下安装运行phpMyAdmin

首先确保安装了phpMyAdmin,其次要求服务器是打开的。 如果是在Windows下,建议下载安装WampServer,这是一个集成软件,集成了Apache+MySQL+PHP的开发环境,而且也自带了phpMyAdmin这个软件。...

临江仙卜算子 ⋅ 9分钟前 ⋅ 0

jdk1.8 安装及环境变量配置

1.根据jdk 的软件安装包,首先安装,jdk,

kuchawyz ⋅ 9分钟前 ⋅ 0

给Java字节码加上”翅膀“的JIT编译器

给Java字节码加上”翅膀“的JIT编译器 上面文章在介绍Java的内存模型的时候,提到过由于编译器的优化会导致重排序的问题,其中一个比较重要的点地方就是关于JIT编译器的功能。JIT的英文单词是...

九劫散仙 ⋅ 10分钟前 ⋅ 0

PCI简介(二)

1.x86处理器系统地址空间简介 1.1 CPU地址空间 CPU地址空间是指CPU所能寻址的空间大小,比如对于32位CPU来说,其所能寻址的空间大小为0~4G。这是由CPU自身的地址总线数目决定的。这段空间也被...

深山野老 ⋅ 11分钟前 ⋅ 0

spring中的InitializingBean接口

好久没更博了,真有点怀念,前段时间刚和上家公司say bye,这次进的是电商公司,今天刚开始看代码,逻辑很复杂。 今天看的注册功能,里面见到一个知识点,现在记录一下,今天看项目时见到里面...

千元机爱好者 ⋅ 13分钟前 ⋅ 0

机器学习:数据预处理之独热编码(One-Hot)

前言 ———————————————————————————————————————— 在机器学习算法中,我们经常会遇到分类特征,例如:人的性别有男女,祖国有中国,美国,法国等。 ...

NateHuang ⋅ 21分钟前 ⋅ 0

MyBatis之输入与输出(resultType、resultMap)映射

在MyBatis中,我们通过parameterType完成输入映射(指将值映射到sql语句的占位符中,值的类型与dao层响应方法的参数类型一致),通过resultType完成输出映射(从数据库中输出,通过dao层的方法查...

瑟青豆 ⋅ 21分钟前 ⋅ 0

屏蔽运营商广告劫持

在今天早上我查找知乎时再次遇到了恶心的运营商广告劫持,右下角硕大的广告直接让知乎挂掉了,我刷了五次知乎才好,之前休息的时候逛知乎也是多次加载错误,估计也是这劫持的锅,相信各位也遇...

gcudwork ⋅ 25分钟前 ⋅ 0

java web 进度条实现原理

资料路径 https://blog.csdn.net/fengsheng5210/article/details/79305026

zaolonglei ⋅ 26分钟前 ⋅ 0

命令行输出java版本与环境变量配置的不一样问题解决

问题:java10刚出来,本着好奇的心,急切的装了体验一下,然后实际项目需求还是java8,所以体验完了就把环境变量改回来了,但是出现了一个问题,命令行输出java版本与环境变量配置的不一样,...

消散了的诗意 ⋅ 28分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部