Html5 localStorage新手入门实例教程

日期:2021-02-26 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

界定

写保护的 localStorage 容许你浏览1个 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,1个标识的 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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:Html5完成iPhone启动页面示例编码 返回下一篇:没有了