如何通过JavaScript操作SessionStorage与LocalStorage？

本文共计771个文字，预计阅读时间需要4分钟。

目录+前言+SessionStorage与LocalStorage简介+如何使用SessionStorage与LocalStorage+LocalStorage与SessionStorage的区别+安全性说明+应对跨站脚本攻击（XSS）+如何避免攻击+提升用户体验+使用存储

目录

• 前言
• SessionStorage和LocalStorage简介
• 如何使用SessionStorage和LocalStorage
• LocalStorage与SessionStorage的区别
• 安全性说明
• 应对跨站点脚本攻击（XSS）
• 如何避免攻击？
• 对用户体验的提升
• 使用存储对象进行浏览器缓存
• 监听LocalStorage变化
• 总结与结论

前言

作为Web开发人员，在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。

本文中，我们将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后我们将讨论如何根据您的要求挑选合适使用的对象。

SessionStorage和LocalStorage简介

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

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

如何使用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，则在所有其他选项卡和窗口中都会看到更新后的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 主域下，但它们相互不能访问对方的存储对象。

另外，不仅对子域名相互独立，对于针对使用www.68idc.cn 欢迎留下您的宝贵建议】