一、浏览器存储
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种:
(1)本地存储,对应localStorage对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应 sessionStorage对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。
二、本地存储与会话存储的异同
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
三、Web存储容量限制
大多数浏览器都把本地存储限制为 5MB以下。这个是和网站所在的域联系在一起的。
四、代码演示
1、会话存储
// 存储键值对
sessionStorage.setItem('键', '值');
// 获取
sessionStorage.getItem('键');
// 存储数组
let name = ['a', 'b', 'c']
sessionStorage.setItem('name1',JSON.stringify(name));
// 获取数组
console.log(JSON.parse(sessionStorage.getItem('name1')));
// 清除会话存储
sessionStorage.clear()
// 清除特定键值对
sessionStorage.removeItem('键');
2、本地存储
localStorage.setItem('键', '值'); //本地存储键值对
//typeof 为object类型
let Name = localStorage.getItem('键') //在本地存储中获取键值对
console.log(Name) //输出值
//如果从不存在的本地存储中获取内容,则结果为 null
本地存储的一个限制是它将数组存储为字符串,所以我们使用JSON.stringify 将数组存储在本地存储中。
let name = ['a', 'b', 'c']
localStorage.setItem('name1',JSON.stringify(name));
//将name以数组形式存储在name1中
之后我们就使用 JSON.parse
从本地存储中获取数组
console.log(JSON.parse(localStorage.getItem('name1')));
因此,我们使用:JSON.stringify:将数组设置为本地存储中的值。
JSON.parse:从本地存储中获取数组。
用 localStorage.clear()
来清除本地存储。
用localStorage.removeItem('键')
删除特定键值对 。