Javascript本地存储（二）

2018-09-20 本文已影响0人小小的白菜

Javascript本地存储（一）

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

Web storage和Cookie的区别

Web Storage的概念和Cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外Cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem，getItem，removeItem，clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

localStorage

判断浏览器是否支持localStorage

if(window.localStorage) { 
    alert("浏览支持localStorage")
} else {
    alert("浏览暂不支持localStorage")
}
//或者 
if(typeof window.localStorage === 'undefined') {
    alert("浏览暂不支持localStorage")
}

localStorage的属性方法

属性方法	说明
`localStorage.length`	获得`storage`中的个数
`localStorage.key(n)`	获得`storage`中第`n`个元素对的键值（第一个元素是`0`）
`localStorage.key`	获取键值`key`对应的值
`localStorage.getItem(key)`	获取键值`key`对应的值
`localStorage.setItem(key, value)`	添加数据，键值为`key`，值为`value`
`localStorage.removeItem(key)`	移除键值为`key`的数据
`localStorage.clear()`	清除所有数据

sessionStorage

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）

sessionStorage的属性方法

属性方法	说明
`sessionStorage.length`	获得`storage`中的个数
`sessionStorage.key(n)`	获得`storage`中第`n`个元素对的键值（第一个元素是`0`）
`sessionStorage.key`	获取键值`key`对应的值
`sessionStorage.getItem(key)`	获取键值`key`对应的值
`sessionStorage.setItem(key, value)`	添加数据，键值为`key`，值为`value`
`sessionStorage.removeItem(key)`	移除键值为`key`的数据
`sessionStorage.clear()`	清除所有数据

sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

参考文章

https://www.jianshu.com/p/c94e539a552f
https://juejin.im/entry/59db9bac51882578db27ad4f