LocalStorage

什么是 LocalStorage

LocalStorage 是 HTML5 提供的一个 API，用来在本地保存数据

window.localStorage

LocalStorage 的特性

• 可以长久保存，除非手动清除
• 存储空间大，一般在 5MB 左右
• 与 HTTP 无关，不参与与服务器通讯
• 只有相同域名的页面才能互相读取 LocalStorage

sessionStorage

什么是 sessionStorage

sessionStorage 也是 HTML5 提供的一个 API，也是用来在本地保存数据的

window.sessionStorage

sessionStorage 的特性

sessionStorage 与 LocalStorage 的区别在于 sessionStorage 是临时保存数据，关闭页面数据就会清空

• 关闭页面数据就会清空
• 存储空间大，一般在 5MB 左右
• 与 HTTP 无关，不参与与服务器通讯
• 只有相同域名的页面才能互相读取 sessionStorage

Storage 的方法

存值

Storage.setItem(key,value)

setItem() 接收两个参数，第一个是键名，第二个是要保存的数据；两个参数都是字符串，如果不是字符串会转成字符串 如果要保存的数据是对象的化，先将数据转换成 JSON 字符串，不然读取出来的是[object Object]

localStorage.setItem('preson',{name:'张三'}) 
localStorage.getItem('preson',{name:'张三'}) 
// [object Object]

Storage 取值

localStorage.getItem(key)

localStorage.setItem('preson',JSON.stringify({name:'张三'}))
localStorage.getItem('preson') 
// '{"name":"张三"}'

LocalStorage 删除

localStorage.removeItem(key)

localStorage.removeItem('preson') 

LocalStorage 清空

localStorage.clear()

Cookie 与 Storage

以前是用 Cookie 存储内容的，这样会增加请求的大小。

1. Storage 是存在本地它与 HTTP 无关，HTTP 请求不会带上 LocalStorage
2. LocalStorage 是永久有效的，除非用户自己删除，而 Cookie 默认是关闭页面就会失效
3. Storage 最大存储量大概是 5Mb 左右，而 Cookie 一般只有 4kb 左右