localStorage && sessionStorage

localStorage&&sessionStorage

简介

html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage。

1. sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，会话结束后数据也随之销毁。
2. localStorage 用于存储一个域名下的需要永久存在在本地的数据，这些数据可以被一直访问，直到这些数据被删除。

因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期，sessionStorage 存储的数据的生命周期是一个会话，而 localStorage 存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期的。

区别

相同点

• localStroage和sessionStroage是相似的

不同点

• 生命周期不同，localStroage的生命周期是永久，数据在localStorage中是可以无限期保存的；sessionStroage的生命周期是一个会话，会话结束时会清除sessionStorage中保存的数据

API

localStorage.getItem()
localStorage.setItem()
localStorage.removeItem()
localStorage.clear()

sessionStorage.getItem()
sessionStorage.setItem()
localStorage.removeItem()
localStorage.clear()

example

• 添加键值对：
  localStorage.setItem(key, value) setItem() 用于把值 value 存储到键key上。
  除了使用 setItem() ，还可以使用 localStorage.key = value 或者 localStorage['key'] = value 这两种形式。
  另外需要注意的是，key和value值必须是字符串形式的，如果不是字符串，会调用它们相应的toString() 方法来转换成字符串再存储。当我们要存储对象是，应先转换成我们可识别的字符串格式（比如JSON格式）再进行存储。

    localStorage.setItem('name','linjianran')
    //localStorage.name = 'linjianran'
    //localStorage['name'] = 'linjianran'
    //把一个用户存储在user的键上
    localStorage.setItem('user', JSON.stringify(id:1,name:'linjianran'))

• 获取键值：
  localStorage.getItem(key) getItem() 用于获取键 key 对应的数据。
  getItem() 和 setItem() 一样，getItem() 也有两种等效形式 value = localStorage.key和 value = localStorage['key'] 。
  获取到的 value 值是字符串类型，如果需要其他类型，要做手动的类型转换。

    let name = localStorage.getItem('name')
    //let name = localStorage.name
    //let name = localStorage['name']
    //获取存储到user的键上的值
    let user = JSON.parse(localStorage.getItem('user'));

• 删除键值对：
  localStorage.removeItem(key) removeItem() 用于删除指定键的项。
  localStorage 没有数据过期的概念，所有数据如果失效了，需要开发者手动删除。

let name = localStorage.getItem('name') //'linjianran'
localStorage.removeItem('name')
name = localStroage.getItem('name') //null

• 清除所有键值对：
  localStorage.clear() 用于删除所有存储的内容。
  clear() 和 removeItem() 不同的地方是 removeItem() 删除的是某一项，而 clear() 是删除所有。

localStorage.clear()
let length = localStorage.length // 0

• 获取 localStorage 的属性名称(键名称)：
  localStorage.key(index) key() 用于获取指定索引的键名称。
  需要注意的是赋值的早晚对键值对应的索引值无影响，索引值按键值名称做升序排列，key()可用于遍历 localStorage 存储的键值。

localStorage.setItem('aKey1','aValue')
localStorage.key(0) // aKey1
localStorage.setItem('bKey','bValue')
localStorage.key(1) // bKey
localStorage.setItem('aKey2','aValue')
localStorage.key(0) // aKey1
localStorage.key(1) // aKey2
localStorage.key(2) // bKey

• 获取loaclStorage中保存的键值对的数量：
  localStorage.length length 属性用于获取localStorage中键值对的数量

localStorage.setItem('aKey1','aValue')
localStorage.length // 1
localStorage.setItem('bKey','bValue')
localStorage.length // 2

下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。

//获取文本输入框
let field = document.getElementById('field')

//检测是否存在autosave键值
//(这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem('autosave')) {
    //恢复文本输入框的内容
    field.value = sessionStorage.getItem('autosave')
}

//监听文本输入框的 change 事件
field.addEventListener("change",function() {
    // 保存结果到 sessionStorage 对象中
    sessionStorage.setItem('autosave', field.value)
})

Web Storage 事件

• storage 事件当存储的数据发生变化时，会触发 storage 事件。但要注意的是它不同于click类的事件会事件捕获和冒泡，storage 事件更像是一个通知，不可取消。触发这个事件会调用同域下其他窗口的storage事件，不过触发storage的窗口（即当前窗口）不触发这个事件。storage 的 event 对象的常用属性如下：

  oldValue：更新前的值。如果该键为新增加，则这个属性为null。
  newValue：更新后的值。如果该键被删除，则这个属性为null。
  url：原始触发storage事件的那个网页的网址。
  key：存储store的key名

    function storageChanged() {
        console.log(arguments);
    }

    window.addEventListener('storage', storageChanged, false);