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去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python 字符串操作方法大全
2014/03/11 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python中循环语句while用法实例
2015/05/16 Python
django缓存配置的几种方法详解
2018/07/16 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python下载库的步骤方法
2019/10/12 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
一名老师的自我评价
2014/02/07 职场文书
《三峡》教学反思
2014/03/01 职场文书
军人离婚协议书样本
2014/10/21 职场文书
安全先进个人材料
2014/12/29 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL