本地存储和会话存储

一、浏览器存储

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('键')删除特定键值对 。