web本地存储(localStorage、sessionStorage)

说明

HTML5为我们提供了新的用于存储本地数据的javascript API，可以在浏览器中存储我们想要存储的数据。分为持久化存储(localStorage)和会话存储(sessionStorage)，根据浏览器厂商的不同，每个域分配的空间也不同，大约为5M到10M的存储空间。

API

localStorage和sessionStorage的用法基本一致，引用类型的值要转换成JSON

• 字符串转化为整数使用parseInt
• 字符串转化为float类型parseFloat
• 数组转化为json字符串JSON.stringify(arr)
• json字符串转化为数组JSON.parse(json)

存储数据到本地

// 使用setItem方法存储数据
localStorage.setItem('name', 'ding')
sessionStorage.setItem('name', 'ding')
// 采用直接赋值的方式存储数据
localStorage.age = 22
sessionStorage.age = 22

获取本地存储中的数据

// 通过getItem()方法根据键获取值
console.log(localStorage.getItem('name')) // ding
console.log(sessionStorage.getItem('name')) // ding
// 直接获取存储对象下面的属性
console.log(sessionStorage.name)  // ding
console.log(localStorage.name)  // ding

通过属性length和key属性操作storage

for(var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i)
    var value = localStorage[key]
    console.log(key, value) // age 22 & name ding
}
for(var i = 0; i < sessionStorage.length; i++) {
    var key = sessionStorage.key(i)
    var value = sessionStorage[key]
    console.log(key, value) // age 22 & name ding
}

删除本地存储中指定数据

localStorage.removeItem('name')
sessionStorage.removeItem('name')

删除本地存储中所有数据

localStorage.clear()
sessionStorage.clear()

localStorage和sessionStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。（特别提示：新建一个标签页面以后，即使跟前一个页面的地址相同，新建标签页面也获取不到前一个页面中获取或者设置的sessionStorage）
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。localStorage所有页面都可以获取；