SessionStorage、LocalStorage详解

更新日期: 2020-10-15阅读: 1.6k标签: 存储

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

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


SessionStorage和LocalStorage简介

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

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


如何使用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 主域下,但它们相互不能访问对方的存储对象。

另外,不仅对子域名相互独立,对于针对使用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
  • 高性能并不重要
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://blog.bitsrc.io/sessionstorage-and-localstorage-a-ux-security-comparison-a05c486413e0


链接: https://fly63.com/article/detial/9716

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

前端数据保存_使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!