欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5 localStorage入门教程

程序员文章站 2023-12-01 14:42:58
这篇文章主要介绍了Html5 localStorage入门教程的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-04-26...

定义

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

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