前端存储的两种方式

随着互联网的发展，网页应用变得越来越复杂，为了满足各种需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

一、本地存储（window.localStorage）

• 有可能保存在浏览器内存里，有可能在硬盘里。
• 永久生效，除非手动删除（比如清理垃圾的时候）。
• 可以多窗口共享。

二、会话存储（window.sessionStorage）

• 保存在内存中。
• 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
• 在同一个窗口下数据可以共享。

三、web存储特性

• 存储容量大
• localStorage可存储20M，而sessionStorage可存储5M
• 但只能存储字符串，如果需要存储对象可使用JSON.stringify()处理成json串

四、API

• 设置存储

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

• 根据键获取值

window.localStorage.getItem('key')
window.sessionStorage.getItem('key')

• 根据键删除值

localStorage.removeItem('key')
sessionStorage.removeItem('key')

• 清空所有存储内容：

localStorage.clear()
sessionStorage.clear()