原生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对象)

 

 

#DOM #storage