一篇文章图文并茂地带你轻松学会 HTML5 storage
html5 storage api
localStorage
和 sessionStorage
是 html5
新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息。
为什么要有 storage
?
我们已经有了 session
可以帮助我们存储信息,为何还需要 storage
呢?
- 各个浏览器的
cookie
长度大概只能在4kb
左右,而storage
大概能达到5M
,这意味着可以存储更多的信息 cookie
可以被后端更改,在每次进行网络请求的时候都会被发送给服务器,而storage
不会,这意味着这个存储是完全受控于前端(JavaScript)的。
storage 类型
storage
一共有两种
localStorage
这个存储对象的存储和
origin
有关,即只要是同域名同协议同端口,存储是共享的。尽管关机了,或是关掉浏览器了,只要打开同源网站,存储的数据会依然存在,数据不会过期消失。sessionStorage
这个存储对象的存储是暂时的,只保持在当前会话中,简单来说就是和浏览器的一个
tab
有关,只要tab
关掉了再打开数据就没了,但是在当前界面刷新的话,数据就还在(这个时候认为是一个tab
)。
两个 storage
的 api
很相似,下面以 localStorage
为例
localStorage 演示
基础 api
localStorage.setItem("name", "huro"); // 设置键值对
可以在 chrome
浏览器的控制台进行观察,这里已经设置上去了。下面也可以做相应的测试。
localStorage.getItem("name"); // huro
localStorage.removeItem("name"); // 删除某个键
localStorage.clear(); // 删除所有键值对
localStorage.key(0); // 获得索引为 0 的key
localStorage.length; // 获得 `localStroage` 的键的个数
以上是 storage
的 api
唯一需要注意的是 key(index)
这个 api
和 key
被设置的先后是没有关系的。
类对象操作
也可以用类对象的方法操作
localStorage.name = "huro";
console.log(localStorage.name); // huro
delete localStorage.name; // 删除键
但是上面的做法不推荐,如果用的是某些特殊的 key
例如 length
就会报错,因为原先 localStorage.length
表示获得键值对长度,理应是不能修改的。
localStorage["length"] = 4; // 修改无效
因此不推荐用这个做法修改 storage
遍历键值
由于 storage
并没有 Symbol.iterator
属性,这意味着 storage
不能用 for of
循环遍历。以下有三种遍历方式。
假设我们只有一个键值对 name: huro
for in
循环
for (let key in localStorage) {
console.log(key);
}
上述的写法是错误的,因为 for in
循环会遍历原型链上的属性和方法,因此需要稍作改善。
for (let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue;
}
console.log(key);
}
这个时候就能正确的只打印出键 name
- 简单
for
循环
for(let i = 0; i < localStorage.length; i+= 1) {
let key = localStorage.key(i);
console.log(key);
}
这个时候能正确的只打印出键 name
Object.keys()
这个方法会获得某个对象自身的 key
,而不会管原型链上的
const keys = Object.keys(localStorage);
for(let key of keys) {
alert(key);
}
而且获得的 key
是数组,具有 iterator
因此可以用 for of
遍历
这个时候能正确的只打印出键 name
只能是 string
storage
被设计出来比较不足的地方是,键和值都只能是 string
类型的,如果不是的话,会自动转换成 string
。
由于是隐式转换,初学者往往不知道,这意味着可能带来一些 bug
localStorage.user = { name: "huro" };
console.log(localStorage.user); // [object Object]
上述代码在存储 user
的时候,被自动调用 toString
方法,转化为了 [object Object]
storage
事件
storage
事件返回一个对象,里面包含几个参数
key
改变的键oldValue
=>旧值 || null
newValue
=>新值 || null
url
触发这个事件的url
地址storageArea
要么是localStorage
要么是sessionStorage
取决与是更改哪个storage
的
// 1.html
window.addEventListener("storage", (state) => {
console.log(state.key, state.value, state.url); // name huro ./2.html(实际 url 是绝对路径)
})
// 2.html
localStorage.setItem("name", "huro");
还记得我们之前说过, localStorage
只要是同源都可以分享吗,这意味如果我们打开了两个窗口,只要他们是同源的,我们可以用上述的监听事件,监听另一个端口修改 storage
,也就是可以实现不同的窗口之间的数据共享。
注意: 经测试,chrome
edge
等现代浏览器不会触发自身文件或同文件的 storage
事件,即必须是两个不同的 html
才会互相触发。
例如 test1.html
和 test2.html
都设置了 storage
监听事件,且同源。
则 test1.html
的 storage
的 api
事件会触发 test2.html
的,但是不能触发本身的 storage
监听事件。
另外这里的 api
事件也有限制,经过笔者测试,似乎只有
setItem
getItem
removeItem
有效果,而 clear
事件是没有效果的。
上面全程用 localStorage
演示,
sessionStorage
也是类似的,读者有兴趣可以自行码一下代码。
总结
storage
是很好的一个 html5
特性,让我们方便快捷的存储数据,美中不足的是只能存储字符型数据,不过也很容易解决这个问题。同时利用监听事件,也可以实现不同窗口之间的广播机制。是非常实用的一个特性。
一篇文章图文并茂地带你轻松学会 HTML5 storage的更多相关文章
- 一篇文章图文并茂地带你轻松实践 HTML5 history api
HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)
JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)
JavaScript 设计模式(二) 本篇文章是 JavaScript 设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完 上篇文章 后再看这篇文章,当然两篇文章并没有过多的依赖性. 5. ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 继承
JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链
JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 闭包
JavaScript 闭包 为了更好地理解 JavaScript 闭包,笔者将先从 JavaScript 执行上下文以及 JavaScript 作用域开始写起,如果读者对这方面已经了解了,可以直接跳过 ...
- 一篇文章让Oracle程序猿学会MySql【未完待续】
一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...
- 一篇文章教你学会ASP.Net Core LINQ基本操作
一篇文章教你学会ASP.Net Core LINQ基本操作 为什么要使用LINQ LINQ中提供了很多集合的扩展方法,配合lambda能简化数据处理. 例如我们想要找出一个IEnumerable< ...
随机推荐
- Sentry(v20.12.1) K8S 云原生架构探索,1分钟上手 JavaScript 性能监控
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- ETL优化(转载)
1.引言 数据仓库建设中的ETL(Extract, Transform, Load)是数据抽取.转换和装载到模型的过程,整个过程基本是通过控制用SQL语句编写的存储过程和函数的方式来实现对数据的直接操 ...
- OPC UA 统一架构) (一)
OPC UA 一 .OPC UA简介 OPC UA(OPC Unified Architecture)是下一代OPC统一体系架构,是一种基于服务的.跨越平台的解决方案. OPC UA具有如下特点: 1 ...
- Dubbo 总结:关于 Dubbo 的重要知识点
一 重要的概念 1.1 什么是 Dubbo? Apache Dubbo (incubating) |ˈdʌbəʊ| 是一款高性能.轻量级的开源Java RPC 框架,它提供了三大核心能力:面向接口的远 ...
- log4j 动态配置,重启项目配置失效问题
公司项目升级之后,成功去掉了log4j.properties配置文件,实现页面动态配置日志级别. 很经典的两个配置,但是最终还是随着时代的进步而被优化,最终弄成了可配置项 但是随之问题就来了,当我启动 ...
- 安装Archlinux+UEFI启动
为了安装Arch自己也走了很多弯路,找了很多教程,最后探索出了这样一个安装方法,不一定适用于每个人. ArchWiki官方安装手册 本方法全程插上网线. 准备 获取镜像 镜像可以从官网获取,访问官方下 ...
- 浅谈JavaScript异步编程
单线程模式 我们知道JS的执行环境是单线程的,是因为JS语言最早是运行在浏览器端的语言,目的是为了实现页面上的动态交互.实现动态交互的核心就是DOM操作,因此决定了JS必须是单线程模式工作.我们来假设 ...
- Spark Streaming状态管理函数updateStateByKey和mapWithState
Spark Streaming状态管理函数updateStateByKey和mapWithState 一.状态管理函数 二.mapWithState 2.1关于mapWithState 2.2mapW ...
- Spark SQL 自定义函数类型
Spark SQL 自定义函数类型 一.spark读取数据 二.自定义函数结构 三.附上长长的各种pom 一.spark读取数据 前段时间一直在研究GeoMesa下的Spark JTS,Spark J ...
- MySQL 数据库性能调优
MySQL 数据库性能调优 MySQL性能 最大数据量 最大并发数 优化的范围有哪些 存储.主机和操作系统方面: 应用程序方面: 数据库优化方面: 优化维度 数据库优化维度有四个: 优化选择: 数据库 ...