# Storage对象

在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()

1
2
3
4
5
6
7

# 保存数据

使用 localStorage 可以创建一个本地存储的键值对,并存储在浏览器中 Application 中的 Local Storage 中.

localStorage.setItem('key1', 'value1')
localStorage.setItem('key2', {
    name:'zhangsan',
    age:12
})

1
2
3
4
5

application_localStorage

从图中大家可以看到,当我们存进去的值是个对象的时候,它会变成 [object Object].这是因为存进去的 key/value 都是以字符串的形式保存在浏览器中.当我们存进去一个对象的时候,它会调用对象的 toStirng 方法,将其变成 [object Object].因此当我们想要存储一个对象形式的值时,我们可以使用 JSON.stringify 将其序列化.

localStorage.setItem('key2', JSON.stringify({
  name:'zhangsan',
  age:12
}))

1
2
3
4

此时存进去的字符串就是原本我们对象的字符串形式了.

application_localStorage

# 获取键名

获取某个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

1
2
3
4
5

# 删除数据

删除某个特定的键值对

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

1
2
3
4
5
6

# 获取键值对的数量

console.log(localStorage.length)  // 2

因为 Storage 是个对象,所以可以使用 Object.keys() 来获取所有的键名,使用 Object.values() 来获取所有的内容值

console.log(Object.keys(localStorage))  // ["key2", "key1"]
console.log(Object.values(localStorage))  // ["value2", "value1"]

1
2

# 其他

扩展了 cookie 的 4k限制,它的存储量可以高达5M(值在不同的浏览器中有可能是不一样的).且此方法的兼容性还不错,甚至连IE8都支持.localStorage 也是遵循同源策略的,因此不同的网站之间是不相通的.

参考链接:

← ES6 Set 数据结构 instanceof 和 typeof 原理回顾 →