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 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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如何实现只替换一次或N次
2015/10/29 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JavaScript代码调试方法实例小结
2019/01/05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python程序中设置HTTP代理
2016/11/06 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python将音频进行变速的操作方法
2020/04/08 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
关于毕业的广播稿
2014/01/10 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
关爱残疾人标语
2014/06/25 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
家长学校教学计划
2015/01/19 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL