浏览器的本地存储(sessionStorage and localStorage)

浏览器的本地存储

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求，浏览器会经常性的在本地存储大量的数据，因此HTML5规范提出了相关解决方案。

本地存储特性

1. 数据直接存储在用户的浏览器中

2. 设置、读取比较方便,甚至页面刷新以后不丢失数据

3. 容量较大，sessionStorage约5M、localStorage约20M

4. 只能存储字符串,可以将对象JSON.stringify() 编码后进行存储

window.sessionStorage

• sessionStorage的生命周期为关闭浏览器窗口

• 在同一个窗口(页面)下数据可以共享

• 数据以键值对的形式存储使用

语法:

存储数据:

sessionStorage.setItem(key, value)

获取数据:

sessionStorage.getItem(key)

删除数据:

sessionStorage.removeItem(key)

清空数据：(所有的数据都清除掉)

sessionStorage.clear()

window.localStorage

• localStorage生命周期永久生效，除非自己手动删除 否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享），即使浏览器关闭也在
• 数据以键值对的形式存储使用

语法:

存储数据:

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有的数据都清除掉)

localStorage.clear()

具体的案例和练习,下篇博客中会用到,希望大家持续关注!