Html5 localStorage入门教程


Posted in HTML / CSS onApril 26, 2018

定义

只读的 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>

注意

  1. localStorage 只能同域名下使用,可以搭配 postMessage 和 iframe 实现跨域通信。
  2. 低版本IE不支持 localStorage。
  3. 需在服务器环境下使用,即不能在 file:// 等非正常环境下使用。
  4. 在移动端 localStorage(H5, IOS, Android)会发生不可预知的问题。

其它

Please Stop Using Local Storage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 #HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 #HTML / CSS
html5调用摄像头功能的实现代码
May 07 #HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 #HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 #HTML / CSS
HTML5 device access 设备访问详解
May 24 #HTML / CSS
You might like
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
详解Django CAS 解决方案
2019/10/30 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
初任培训自我鉴定
2013/10/07 职场文书
给领导的检讨书
2014/02/16 职场文书
超市创业计划书
2014/04/24 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
青春励志演讲稿
2014/04/29 职场文书
廉政教育的心得体会
2014/09/01 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
家庭贫困证明
2015/06/16 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript