在 HTML5 提供了两种在客户端储存数据的新方法:
localStorage和sessionStorage.之前的储存功能由 cookie 来完成,但 cookie 不太适合大量数据的储存,因为每次向服务器请求都会将 cookie 带过去.
localStorage 和 sessionStorage 这两个存储对象可以对网页数据进行增删改查操作.它们的区别在于前者可以持续性保存数据,即数据并没有过期时间,除非我们手动清除数据,而后者是将数据保存在当前会话中,关闭当前窗口或标签页后就会消失.它们都是挂载在 window 对象上的.即 window.localStorage === localStorage.下面我们主要以 localStorage 来介绍它们的用法.
# 基本用法
# 检测兼容性
当我们在首次使用 localStorage 的时候,我们需要判断下浏览器是否支持这个属性.该属性在 IE8+浏览器上就已经支持了(IE 是浏览器兼容性质检员,它都能支持,其他的基本也没啥问题),所以目前主流的浏览器都是支持这个属性的.
function fn() {
if (!window.localStorage) {
return alert('当前浏览器不支持localStorage')
}
console.log('begin coding')
}
fn()
# 保存数据
使用 localStorage 可以创建一个本地存储的键值对,并存储在浏览器中 Application 中的 Local Storage 中.
localStorage.setItem('key1', 'value1')
localStorage.setItem('key2', {
name: 'zhangsan',
age: 12,
})
从图中大家可以看到,当我们存进去的值是个对象的时候,它会变成 [object Object].这是因为存进去的 key/value 都是以字符串的形式保存在浏览器中.当我们存进去一个对象的时候,它会调用对象的 toStirng 方法,将其变成 [object Object].因此当我们想要存储一个对象形式的值时,我们可以使用 JSON.stringify 将其序列化.
localStorage.setItem(
'key2',
JSON.stringify({
name: 'zhangsan',
age: 12,
})
)
此时存进去的字符串就是原本我们对象的字符串形式了.
# 获取键名
获取某个 key 名
console.log(localStorage.key(0)) // 获取储存对象中第n个键值对的键名
# 获取数据
获取某个特定 key 对应的 value 值
console.log(localStorage.getItem('key1')) // value1
同样的,但我们想要取到一个 JSON 字符串中某个键对应的值时,可以将其取出来后使用 JSON.parse 反序列化
localStorage.setItem(
'key2',
JSON.stringify({
name: 'zhangsan',
age: 12,
})
)
console.log(JSON.parse(localStorage.getItem('key2')).name) // zhangsan
# 删除数据
删除某个特定的键值对
localStorage.removeItem('key1')
# 清除全部数据
清除全部的键值对
localStorage.clear()
# 获取整个 Storage 对象
console.log(localStorage) // Storage {key2: "value1", key1: "value1", length: 2}
从这里可以看出来, localStorage 是个对象,因此还可以使用下面的方法保存,读取或删除数据.
localStorage['key2'] = 'value2'
localStorage.key3 = 'value3'
console.log(localStorage['key2']) // value2
console.log(localStorage.key3) // value3
delete localStorage['key2']
delete localStorage.key3
# 获取键值对的数量
console.log(localStorage.length) // 2
因为 Storage 是个对象,所以可以使用 Object.keys() 来获取所有的键名,使用 Object.values() 来获取所有的内容值
console.log(Object.keys(localStorage)) // ["key2", "key1"]
console.log(Object.values(localStorage)) // ["value2", "value1"]
# 其他
扩展了 cookie 的 4k 限制,它的存储量可以高达 5M(值在不同的浏览器中有可能是不一样的).且此方法的兼容性还不错,甚至连 IE8 都支持.localStorage 也是遵循同源策略的,因此不同的网站之间是不相通的.
参考链接:
