原生DOM系列-Storage对象

本系列文章中所指的DOM,都是纯纯的HTML DOM,不包括XML DOM等
Stroage包含两种机制:localStorage和sessionStorage

localStorage

在当前域名下存取数据
隐私模式下不可用
长期保存数据,页面关闭也不消失无过期时间(但可自行实现过期逻辑)

length

  • 整数
  • 存储在localStorage中的数据项的数量
1
localStorage.length

key(index)

  • 从localStorage中获取第index个数据项的键名
1
2
localStorage.key(0) // 获取localStorage中第一个元素
localStorage.key(localStorage.length - 1) // 获取localStorage中最后一个元素

getItem(key)

  • 从localStorage中取出键名为key的值
1
localStorage.getItem('a') // 拿到a的值,如果没有则返回null

setItem(key, val)

  • 将键名为key,值为val的数据项添加到localStorage中
1
localStorage.setItem('a', 1) // localStorage中将在最后面添加此键值

removeItem(key)

  • 从localStorage中删除键名为key的数据项
1
localStorage.removeItem('a') // localStorage中的key为'a'的数据将被删除

clear()

  • 清空localStorage
1
localStorage.clear() // localStorage中的所有数据都将被删除

storage事件

  • 当storage中存储的数据发生变化时,会在window对象上触发storage事件。
  • 重复设置相同的键值对不会触发
  • 做出改变的当前页面也不会触发
  • storage事件是实现跨页面通信的一种方式(postMessage大家也可以试试)
1
2
3
4
5
6
7
window.addEventListener('storage', (e) => {
e.key // 改变的键
e.oldValue // 旧值,如果是第一次设置,则为null
e.newValue // 新值
e.url // 做出改变的页面url
e.storageArea // localStorage中的所有键值对
}, false)

sessionStorage

仅作用于当前页面
页面刷新不会导致数据丢失
页面跳转之后又返回也不会导致数据丢失
页面关闭后数据消失
除不会触发storage事件外,sessionStorage存在同localStorage相同的属性和方法(都继承自Stroage对象)