SessionStorage与LocalStorage的用法详解

一、SessionStorage和LocalStorage简介

SessionStorage和LocalStorage都是HTML5提供的Web Storage API，用于将数据存储在客户端（浏览器）中，而不是像Cookies那样将数据存放在服务器端。它们在浏览器中以键值对(key-value pairs)的形式存储数据，能够存储大量数据，并且可以跨浏览器窗口保持数据。

SessionStorage中存储的数据只在当前会话中保留，当用户关闭浏览器标签页或刷新页面时，SessionStorage中的数据就会被清空。而LocalStorage中存储的数据会一直保留在客户端中，即使用户关闭浏览器窗口或者重启电脑，LocalStorage中的数据仍然不会被删除。

二、使用SessionStorage

1. 设置和获取SessionStorage里的数据

// 设置SessionStorage数据
sessionStorage.setItem("key", "value");

// 获取SessionStorage数据
var value = sessionStorage.getItem("key");

在SessionStorage中设置数据使用setItem()方法，该方法接受两个参数，第一个参数为键名，第二个参数为键值。获取SessionStorage里的数据使用getItem()方法，该方法接受一个参数，即键名，返回键值。

2. 删除SessionStorage中的数据

// 删除SessionStorage中的数据
sessionStorage.removeItem("key");

使用removeItem()方法，传入要删除数据的键名即可删除SessionStorage中的数据。

3. 清空SessionStorage中的所有数据

// 清空SessionStorage中的所有数据
sessionStorage.clear();

使用clear()方法即可清空SessionStorage中的所有数据。

三、使用LocalStorage

1. 设置和获取LocalStorage里的数据

// 设置LocalStorage数据
localStorage.setItem("key", "value");

// 获取LocalStorage数据
var value = localStorage.getItem("key");

在LocalStorage中设置数据使用setItem()方法，该方法接受两个参数，第一个参数为键名，第二个参数为键值。获取LocalStorage里的数据使用getItem()方法，该方法接受一个参数，即键名，返回键值。

2. 删除LocalStorage中的数据

// 删除LocalStorage中的数据
localStorage.removeItem("key");

使用removeItem()方法，传入要删除数据的键名即可删除LocalStorage中的数据。

3. 清空LocalStorage中的所有数据

// 清空LocalStorage中的所有数据
localStorage.clear();

使用clear()方法即可清空LocalStorage中的所有数据。

四、SessionStorage和LocalStorage的应用场景

1. 记住用户的个人信息

当用户在登录后，需要记住用户名和密码等个人信息，以便下次访问网站时自动填充表单。使用LocalStorage存储这些个人信息可以防止用户每次都需要输入信息，提高用户体验。

2. 放置表单的临时数据

在填写表单时，如果用户需要离开当前页面或者关闭浏览器标签页，可以使用SessionStorage存储用户填写的表单数据，在用户回来时自动恢复已经填写好的表单数据，不需要重新填写。

3. 记录用户访问页面的状态

在用户访问网站时，记录用户浏览过的页面，并且将这些信息存储在LocalStorage中。这样网站就可以根据用户的浏览行为进行优化，提高用户体验。