H5 localStorage入门
定义
只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage;数据存储为跨浏览器会话。localStorage 类似于 sessionStorage,区别在于,数据存储在 localStorage 是无期限的,而数据存储在 sessionStorage 会被清除,当页面会话结束时——也就是说当页面被关闭。
属性
length
localStorage 内键值对的数量。
localStorage.length // 0
localStorage.setItem('name', 'mazey')
localStorage.length // 1
方法
1.setItem(key, value)
新增/更新 localStorage 的键值对。
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage // Storage {age: "23", name: "mazey", length: 2}
等同于:
localStorage.name = 'mazey'
localStorage.age = '23'
localStorage // Storage {age: "23", name: "mazey", length: 2}
2.getItem(key)
获取 localStorage 中指定键的值。
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage.getItem('name') // mazey
localStorage.getItem('age') // 23
localStorage.getItem('sex') // null
等同于:
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage.name // mazey
localStorage['age'] // 23
localStorage.sex // undefined
3.removeItem(key)
移除 localStorage 中指定键的键值对。
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage // Storage {age: "23", name: "mazey", length: 2}
localStorage.removeItem('age') // undefined
localStorage // {name: "mazey", length: 1}
localStorage.removeItem('age') // undefined
4.clear()
清空 localStorage 中所有键值对。
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage // Storage {age: "23", name: "mazey", length: 2}
localStorage.clear()
localStorage // Storage {length: 0}
存取对象(复杂值)
localStorage 只能存字符串,所以数组/对象等复杂值要先用 JSON.stringify() 转换成字符串,取出来时再用 JSON.parse() 转换成复杂值再使用。
let arr = [1, 2, 3]
localStorage.setItem('arr', arr)
localStorage.getItem('arr') // "1,2,3"
// JSON.stringify()
localStorage.setItem('arr', JSON.stringify(arr))
localStorage.getItem('arr') // "[1,2,3]"
JSON.parse(localStorage.getItem('arr')) // [1, 2, 3]
浏览器标签之前通信
让 window 监听 localStorage 的 storage,一个标签的 localStorage 发生改变时,其它标签做出相应的响应。
test0.html - 改变 localStorage。
<input type="text" id="input" />
<button onclick="setNameForStorage()">Set</button>
<script type="text/javascript">
function setNameForStorage () {
localStorage.name = document.querySelector('#input').value
}
</script>
test1.html - 响应 localStorage 的改变。
<script type="text/javascript">
window.addEventListener('storage', e => {
console.log(e.key, e.newValue) // name 123
})
</script>
注意
- localStorage 只能同域名下使用,可以搭配 postMessage 和 iframe 实现跨域通信。
- 低版本IE不支持 localStorage。
- 需在服务器环境下使用,即不能在 file:// 等非正常环境下使用。
- 在移动端 localStorage(H5, IOS, Android)会发生不可预知的问题。
其它
Please Stop Using Local Storage
H5 localStorage入门的更多相关文章
- 移动H5开发入门教程:12点webAPP前端开发经验
如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...
- 移动H5开发入门知识,CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- 如何开发H5项目 -- 入门篇
前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...
- h5 localStorage存储大小(转)
摘要 HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 loca ...
- H5 localStorage sessionStorage
localStorage 用于长久保存整个网站的数据,没有过期时间,除非手动去除. sessionStorage 会话存储,临时存储,当用户关闭浏览器窗口后,数据被删除. 共同方法 以 localSt ...
- h5 localStorage本地存储
用户名:<input type="text" id="txtname"/> 密码:<input type="text" i ...
- 白鹭引擎EUI做H5活动 入门篇
前言:本学习文档的目的是为了实现h5,或者简单的h5游戏,比如说,我们要实现一个可以左右,或者上下移动的场景的h5,在场景移动的过程中,会有相应的动画或者操作,我们通过 js 也可以实现,但是为了流畅 ...
- h5 localStorage和sessionStorage浏览器数据缓存
sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
随机推荐
- UNRECOGNIZED SELECTOR SENT TO INSTANCE 问题快速定位的方法
开发中常见的一类崩溃错误是遇到:unrecognized selector sent to instance 0xaxxxx…而backtrace又无法明确说明错误在哪行代码,如何快速定位BUG呢? ...
- C++重载IO操作符
操作符的重载有一定的规则,而IO操作符必须重载为普通函数,且应该声明为类的友元函数.我试了,非友元也可以,但是必须提供访问成员变量的函数,所以,出于效率的考虑还是应该定义为友元. 规则如下: 1. ...
- char函数绕过魔术引号注入
我目前学习到的绕过魔术引号的几种方法(如果知道还有别的请万望告之): 1.倘若服务端是GBK可以尝试宽字节注入 2.使用char函数绕过魔术引号进行注入 3.同char函数类似的函数,例如bin(转换 ...
- EF调用存储过程、函数
一.ef4.1 codeFirst 修改表结构 增加字段等 EF code first需要重新生成库导致数据丢失的问题 说这个问题前 首先先说下 我使用ef4.1 codefirst的目的. 是因为可 ...
- 16V554 的测试代码
//------------------------------------------------------------------------ #include "AT16C554 ...
- Go语言中字符串的查找方法小结
这篇文章主要介绍了Go语言中字符串的查找方法小结,示例的main函数都是导入strings包然后使用其中的方法,需要的朋友可以参考下 1.func Contains(s, substr strin ...
- 控制反转(Inversion of Control,英文缩写为IoC),另外一个名字叫做依赖注入(Dependency Injection,简称DI)
控制反转(Inversion of Control,英文缩写为IoC),另外一个名字叫做依赖注入(Dependency Injection,简称DI),是一个重要的面向对象编程的法则来削减计算机程序的 ...
- PyQt的Layout的比例化分块。
一. QGridLayout: // 列比 第0列与第1列之比为 1:2 layout2p1 -> setColumnStretch(0, 1); layout2p1 -> setColu ...
- 登陆Oracle11g的企业管理器
本地:https://localhost:1158/em/ 如果远程:那么把localhost换成服务器IP
- hdu 2686(状压dp)
题目链接:http://poj.org/problem?id=2686 思路:典型的状压dp题,dp[s][v]表示到达剩下的车票集合为S并且现在在城市v的状态所需要的最小的花费. #include& ...