JS SessionStorage和LocalStorage用法详解：区别、安全性与最佳实践

前言

在Web开发中，为了优化用户体验并提升应用性能，在浏览器端存储数据是一项常见操作。通常情况下，开发者主要依赖LocalStorage和SessionStorage这两种机制来实现数据存储。

本文将重点从安全性与用户体验两个维度，对SessionStorage和LocalStorage进行对比评估，并探讨如何根据具体业务需求选择最合适的存储对象。

SessionStorage和LocalStorage简介

在HTML5标准发布之前，开发者通常使用Cookie在客户端保存少量信息。HTML5引入了Web Storage API，提供了更强大的客户端本地数据存储方案，包括LocalStorage和SessionStorage。它允许通过JavaScript以键值对的形式在浏览器中保存数据，相比Cookie具有以下优势：

存储容量更大：Cookie通常限制为4KB，而Web Storage可达5MB。
操作更简便：相比Cookie的字符串解析，Web Storage提供了更直观的API。
不占用带宽：数据不会随每次HTTP请求发送到服务器，减少了网络传输开销。

如何使用SessionStorage和LocalStorage

可以通过浏览器全局对象window直接访问SessionStorage和LocalStorage。具体调用方式如下所示：


sessionStorage = window.sessionStorage
localStorage = window.localStorage

以下是这两种存储类型支持的主要操作方法。


//存储一个item
  storage.setItem('name', 'Alice')
  storage.setItem('age', '5')
//读取一个item
  storage.getItem('name') // returns "Alice"
//get存储对象长度
  storage.length // returns 2
//通过索引get对应的key名
  storage.key(0) // returns "name"
//移除一个item
  storage.removeItem('name')
//清空存储对象
  storage.clear()

LocalStorage与SessionStorage的区别

LocalStorage和SessionStorage的核心区别在于数据在不同浏览器窗口和标签页之间的共享机制不同。

LocalStorage的数据是跨窗口和标签页共享的。这意味着，如果在多个标签页或窗口中打开了同一个应用程序，当其中一个标签页更新了LocalStorage中的数据时，其他所有标签页和窗口都能实时获取到更新后的数据。

相反，SessionStorage的数据是独立于其他窗口和标签页的。如果同时打开了两个标签页，即使它们访问的是同一个网站，其中一个标签页对SessionStorage的修改也不会反映在其他标签页中。例如，假设用户希望分别通过两个浏览器标签页预订两个不同的酒店房间，由于这是独立的会话数据，使用SessionStorage是酒店预订应用的理想选择。

安全性说明

Web Storage的存储对象具有域名独立性，即不同站点下的Web应用拥有各自独立的存储空间，彼此无法访问。这一点上SessionStorage和LocalStorage的行为一致。

举例来说，部署在abc.com域名下的Web应用无法访问xyz.com域名的Web Storage存储对象。

同样地，子域名之间也是相互独立的。尽管www.grapecity.com.cn和gcdn.grapecity.com.cn同属于grapecity.com.cn主域，但它们各自拥有独立的存储对象，无法互相访问对方的数据。

此外，即使域名相同，使用http和https协议的应用也被视为不同的源，因此它们的存储对象也是独立的，这一点在开发时需要特别注意。

应对跨站点脚本攻击（XSS）

首先，我们需要了解什么是XSS攻击？

XSS（跨站点脚本攻击）是指攻击者将恶意脚本注入网页，当其他用户浏览该网页时，浏览器会加载并执行这些脚本，从而导致攻击者获取用户的隐私信息。

LocalStorage和SessionStorage都容易受到XSS攻击的影响。攻击者可以通过注入恶意脚本来直接读写存储对象中的数据。因此，不建议将敏感的个人信息存储在Web Storage中，例如：

用户名和密码
信用卡信息
JsonWeb令牌
API密钥
SessionID

如何避免攻击？

尽量避免在同一域名下部署多个Web应用程序。如果必须这样做，建议尽量使用子域名来部署不同的应用，因为如果多个应用共享同一个域名，它们将共享同一个Web存储对象，从而增加安全风险。
一旦数据被存储在LocalStorage中，开发人员无法在用户清除之前对其进行控制。如果希望在会话结束后自动删除数据，应使用SessionStorage。
从WebStorage读取出的数据都必须经过验证、编码和转义处理，以防止潜在的脚本注入风险。
在将数据保存进WebStorage之前，应对数据进行加密处理，以增强数据的安全性。

对用户体验的提升

虽然敏感数据应避免使用，但我们仍然可以通过WebStorage来改善Web应用程序的用户体验。

例如，当用户填写表单时，如果因意外关闭了标签页或窗口，LocalStorage可以实现自动保存用户已填写的表单数据。这样，当用户再次打开页面时，之前填写的信息会自动恢复。


<!DOCTYPE html>
<html>
<body>
<h2>表单示例</h2>
<form>
  <label for="lname">姓氏:</label><br>
  <input type="text" id="lname" name="lname" value="" onchange="save(this)">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</form>
<script>
  localStorage= window.localStorage
  function save(input) {
    localStorage.setItem(input.id, input.value)
  }
document.getElementById("fname").value=localStorage.getItem("fname")
 document.getElementById("lname").value=localStorage.getItem("lname")
</script>
</body>
</html>

由于我们的场景是待用户再次打开时，自动恢复之前填写的内容，所以这里不能使用SessionStorage作为存储对象，因为它会在窗口关闭时自动清除。

使用存储对象进行浏览器缓存

通常情况下，我们可以缓存一些应用数据，以便后续供Web应用使用。例如，如果你的Web应用需要加载所有国家的货币数据，在不使用WebStorage的情况下，每次加载获取列表时都需要发出HTTP请求来获取，而将数据保存在LocalStorage后，可直接获取数据。

由于LocalStorage不会过期的特性，用户在任何使用打开页面时都可以使用存储对象中的内容，而如果用户想删除LocalStorage数据也很简单，清除浏览器缓存内容即可。

监听LocalStorage变化

LocalStorage是一个可以用作本地持久化存储的对象，我们可以向其中添加数据存储，同样它在用户操作的情况下发生变化时，我们也需要能监听到，当它发生变化时，会触发storage事件，我们可以在window上监听到这个事件，从而完成一些逻辑操作。


window.addEventListener('storage', () => {
  ...
});
 
window.onstorage = () => {
  ...
};

总结与结论

您可以根据您的使用情况选择LocalStorage与SessionStorage。如果您的应用程序需要在多个浏览器窗口和标签页中共享数据，请使用LocalStorage，否则请使用SessionStorage。

SessionStorage和LocalStorage都容易受到XSS攻击。因此，请避免将敏感数据存储在浏览器存储中。

最后，虽然WebStorage很好用，还是建议你在如下的情况下使用：

没有敏感数据
数据尺寸小于 5MB
高性能并不重要

以上就是Javascript怎样使用SessionStorage和LocalStorage的详细内容，更多关于Javascript的资料请关注本站其它相关文章！

JavaScript中SessionStorage与LocalStorage的使用、区别及安全实践

前言