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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
CSS实现五种常用的2D转换
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
MySQL数据源表结构图示
2008/06/05 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Pytorch 实现权重初始化
2019/12/31 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
家长学校实施方案
2014/03/15 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android