一、本地存储是什么?
Webstorage定义了两个对象:sessionStorage和localStorage。sessionStorage是跨会话的存储机制,localStorage是永久存储机制。这两种浏览器存储API提供了在浏览器中不受页面刷新影响而存储数据的两种方式。
数据存储在用户浏览器中;
设置、读取方便、甚至页面刷新不丢失数据;
容量较大,约5M。
二、sessionStorage对象
1.介绍
它可以将数据存储到浏览器中。可以通过F12找到Application中的SessionStorage查看哪些数据被存储进来了。
① 声明周期为关闭浏览器窗口;(关闭浏览器窗口就没有了)
② 在同一个窗口(页面)下数据可以共享;
③ 以键值对的形式存储使用。
2.使用
存储数据:sessionStorage.setItem(key,value)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
清空所有数据:sessionStorage.clear()
sessionStorage对象主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据,可以使用localStorage。
三、localStorage对象
1.介绍
在修订的HTML5规范里,localStorage对象取代了globalStorage,作为在客户端持久存储数据的机制。localStorage可以将数据存储到浏览器中。可以通过F12找到Application中的LocalStorage查看哪些数据被存储进来了。
① 生命周期永久生效,除非手动删除,否则关闭页面,也会存在;
② 可以多窗口(页面)共享(同一种浏览器可以共享);
③ 以键值对形式存储使用。
2.使用
存储数据:localStorage.setItem(key,value)
获取数据:localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
清空所有数据:localStorage.clear()
总结
以上就是今天要分享的内容,本文仅仅简单介绍了SessionStorage和LocalStorage的使用。