一、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中。这样网站就可以根据用户的浏览行为进行优化，提高用户体验。
原创文章，作者：XWHJT，如若转载，请注明出处：https://www.506064.com/n/370073.html
微信扫一扫 
支付宝扫一扫 