浏览器localStorage的存储,读取,删除

localStorage是什么?

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

为什么用它?

优点:

localStorage 拓展了 cookie 的 4K 限制。

localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库

缺点:

localStorage在浏览器的隐私模式下面是不可读取的。

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

区别:

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

怎么用?

储存

window.localStorage.setItem('key',value)

储存object

window.localStorage.setItem('param',JSON.stringify(Object))

读取:

window.localStorage.getItem('key')

// 读取JSON的格式
JSON.parse(window.localStorage.getItem('key'))

删除:

window.localStorage.removeItem('key')

清空:

window.localStorage.clear()

MDN Window.localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).