LocalStorage与SessionStorage的简介和使用-优快云博客

文章目录

Cookie、SessionStorage、LocalStorage简要对比

在HTML5之前，开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。在HTML5发布后，提供了一种新的客户端本地保存数据的方法，那就是Web Storage（分为：LocalStorage和SessionStorage），它允许通过JavaScript在Web浏览器中以键值对的形式保存数据。与Cookie相比，SessionStorage和LocalStorage有以下优点：

拥有更大的存储容量，Cookie是4k，Web Storage为5M。
操作数据相比Cookie更简单。
不需要每次都向服务端发送请求。

SessionStorage、LocalStorage简介

SessionStorage、LocalStorage统称Web Storage。

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协议间也是不同的，这一点也需要注意。

使用SessionStorage和LocalStorage的方法

使用浏览器window对象访问SessionStorage和LocalStorage：

sessionStorage = window.sessionStorage
localStorage = window.localStorage

SessionStorage和LocalStorage这两种存储类型的语法和功能是一样的。

（1）SessionStorage这种存储类型的语法：

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

（2）LocalStorage这种存储类型的语法：

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

LocalStorage与SessionStorage的主要区别

主要区别是：浏览器窗口和选项卡之间的数据共享方式不同。

LocalStorage可跨浏览器窗口和选项卡间共享。就是说如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。
SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡，其中一个更新了SessionStorage，则在其他选项卡和窗口中不会反映出来。举个例子：假设用户想要通过两个浏览器选项卡预订两个酒店房间。由于这是单独的会话数据，因此使用SessionStorage是酒店预订应用程序的理想选择。

LocalStorage与SessionStorage的安全性

预防跨站点脚本攻击（XSS）的方法

XSS攻击的定义：XSS是将一段恶意脚本添加到网页上，通过浏览器加载而执行从而达到攻击并获得隐私信息的目的。LocalStorage和SessionStorage都容易受到XSS攻击。攻击者可直接向存储对象添加恶意脚本并执行。因此不太建议把一些敏感的个人信息存储在Web Storage中，例如：

用户名密码
信用卡资料
JsonWeb令牌
API密钥
SessionID

避免攻击跨站点脚本攻击（XSS）的方法

尽量不要用同一域名部署多个Web应用程序，如果有这种场景请尽量使用子域名部署应用，因为一旦多应用使用统一的域名，这将会对所有的用户共享Web存储对象。
一旦将数据存储在LocalStorage中，开发人员在用户将其清除之前无法对其进行任何控制。如果希望在会话结束后自动删除数据，强烈建议使用SessionStorage。
从WebStorage读取出的数据都要验证、编码和转义。
在保存进WebStorage前将数据加密。

使用LocalStorage的场景

通过WebStorage改善Web应用程序的用户体验。
例如，用户在填写表单，但因为一些原因用户关闭了选项卡/窗口，但表单LocalStorage实现了自动保存用户表单的功能，这样当用户再次打开，用户之前填写的信息会自动被恢复。
这里的场景是待用户再次打开时，自动恢复之前填写的内容，所以这里不能使用SessionStorage作为存储对象，因为它会在窗口关闭时自动清除。

<!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>

使用存储对象进行浏览器缓存。
一般情况下，我们可以缓存一些应用数据，以便后面供Web应用使用。例如，你的Web应用需要加载所有国家的货币数据，在不使用WebStorage情况下，每次加载获取列表时都需要发出HTTP请求来获取，而将数据保存在LocalStorage后，可直接获取数据。
由于LocalStorage不会过期的特性，用户在任何使用打开页面时都可以使用存储对象中的内容，而如果用户想删除LocalStorage数据也很简单，清除浏览器缓存内容即可。

监听LocalStorage变化的语法

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

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

总结

根据使用情况选择LocalStorage与SessionStorage。如果应用程序需要在多个浏览器窗口和标签页中共享数据，使用LocalStorage，否则使用SessionStorage。
SessionStorage和LocalStorage都容易受到XSS攻击。因此，避免将敏感数据存储在浏览器存储中。
建议你在如下情况使用WebStorage：