时光的涂鸦墙

code is poetry

sessionStorage和localStorage

sessionStorage 和 localStorage 区别

  • sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
  • localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
  • Cookie的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
  • Web Storage拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。
  • Cookie的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

localStorage 和 sessionStorage 操作

setItem 存储 value

用途：将 value 存储到 key 字段
用法：.setItem( key, value)
代码示例：

1
2
sessionStorage.setItem('key', 'value')
localStorage.setItem('site', 'js8.in')

getItem 获取 value

用途：获取指定 key 本地存储的值
用法：.getItem(key)
代码示例：

1
2
var value = sessionStorage.getItem('key')
var site = localStorage.getItem('site')

removeItem 删除 key

用途：删除指定 key 本地存储的值
用法：.removeItem(key)
代码示例：

1
2
sessionStorage.removeItem('key')
localStorage.removeItem('site')

clear 清除所有的 key/value

用途：清除所有的 key/value
用法：.clear()
代码示例：

1
2
sessionStorage.clear()
localStorage.clear()

其他操作方法：点操作和[]

web Storage 不但可以用自身的 setItem,getItem 等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

1
2
3
4
5
var storage = window.localStorage
storage.key1 = 'hello'
storage['key2'] = 'world'
console.log(storage.key1)
console.log(storage['key2'])

localStorage 和 sessionStorage 的 key 和 length 属性实现遍历

sessionStorage 和 localStorage 提供的 key()和 length 可以方便的实现存储的数据遍历，例如下面的代码：

1
2
3
4
5
6
var storage = window.localStorage
for (var i = 0, len = storage.length; i < len; i++) {
  var key = storage.key(i)
  var value = storage.getItem(key)
  console.log(key + '=' + value)
}

storage 事件

storage 还提供了 storage 事件，当键值改变或者 clear 的时候，就可以触发 storage 事件，如下面的代码就添加了一个 storage 事件改变的监听：

1
2
3
4
5
6
7
8
9
10
if (window.addEventListener) {
  window.addEventListener('storage', handle_storage, false)
} else if (window.attachEvent) {
  window.attachEvent('onstorage', handle_storage)
}
function handle_storage(e) {
  if (!e) {
    e = window.event
  }
}

storage 事件对象的具体属性如下表：

属性 类型 说明
Property Type 读取一个 jsons 文件
key string less 编译
oldValue any scss 编译
newValue any css 插件处理器
url/uri string 解析 css 添加前缀 css 规则
html5

© 2019 elaine

⇡