HTML5 高级系列:web Storage
HTML5 高级系列:web Storage
浏览数:172
2017-10-23
前言
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 () {
return localStorage.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://caniuse.com/#search=localstorage
下一篇将介绍本地存储的另一种方式 :HTML5 高级系列:indexedDB 数据库
原文链接:https://github.com/lin-xin/blog/issues/11
HTML5 高级系列:web Storage相关推荐
- HTML5 高级系列:web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
- HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
- (五)HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
- html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
- HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...
- 【学习HTML5】 网页存储Web Storage技术
Web Storage组成 Web Storage实际上由两部分组成:sessionStorage与localStorage . sessionStorage用于本地存储一个会话(session)中的 ...
- Web Storage中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- HTML5的web开发,基于Html5技术的WEB开发
摘 要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...
最新文章
- 某大学2021秋季学期Java期末考试范围概述
- [PLM专题] 十分钟了解文本分类通用训练技巧
- Docker系列教程02-MongoDB默认开启鉴权
- ubuntu问题解答集锦
- HDU - 6267 (概论/找规律/递推)
- vscode代码库登录配置_VSCode 配置 Sonar Lint支持代码检查提效
- 冒泡排序算法的 JavaScript 实现
- 在python中可以使用if作为变量名_变量,注释,缩进,细数Python优雅风 | Python基础连载(二)...
- python的for语句要用冒号吗_python中循环的写法 for
- linux 中的快捷键
- 6、Java包的命名与划分
- [VBA]VBA编写的时光倒流软件
- VBM法MRI图像处理——记第一次使用cat12
- Apple Pay 接入
- 老子智慧 之 知人者智 自知者明 [明智]
- mybatis 自动填充无效_mybatisPlus踩坑之--自动填充
- 《Java程序性能优化》读书笔记
- C语言程序设计实践题,2020年C语言程序设计实践实验题目.doc
- 消消乐php源码,利用PHP实现开心消消乐的算法示例
- 西施果蔬彩色保健豆腐
热门文章
- day17(JDBC入门jdbcUtils工具介绍)
- 将5:400等类型的数据转成哈希表
- 应用jacob组件造成的内存溢出解决方案(java.lang.OutOfMemoryError: Java heap space)
- c# 读取写入excel单元格基本操作
- Window Live Toolbar 初体验
- windows系统-汇编语言与机器码的关系
- MFC中动态获取/设置按钮的文字
- 如何实现点击微信内置浏览器返回按钮,返回指定页面,或者原地刷新
- 开关电源仿真与设计基于spice 第2版 中译本_新书推荐 开关电源控制环路设计Christophe Basso 著...
- c语言作业题五六章答案,C语言程序设计五六章习题和课堂测试答案.doc