Javascript怎样使用SessionStorage和LocalStorage

目录
  • 前言
  • 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 主域下，但它们相互不能访问对方的存储对象。

另外，不仅对子域名相互独立，对于针对使用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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue基于localStorage存储信息代码实例

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上

  • HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage(HTML5本地存储技术)

    WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data.Flash Cookie.Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用cookie.有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念? Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业

  • 详解vue中localStorage的使用方法

    什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后

  • 浅谈Web Storage API的使用

    浅谈Web Storage API的使用

    目录 一.浏览器的本地存储技术 1.1.sessionStorage 1.2.localStorage 二.Web Storage相关接口 三.浏览器兼容性 四.隐身模式 五.使用Web Storage API 一.浏览器的本地存储技术 除了最早的使用cookie来进行本地存储之外,现代浏览器使用Web Storage API来方便的进行key/value的存储. Web Storage有两种存储方式: 1.1.sessionStorage 对于每一个访问源,都会维持一个独立的存储区域.只要浏览

  • JavaScript学习教程之cookie与webstorage

    cookie 由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,服务器单从网络连接上是没有办法知道用户身份的.cookie就是为了解决此问题而产生的,每次新的用户请求时,便给用户颁发一个独一无二的身份证,下次访问,必须带上身份证,这样服务器就会知道是哪个用户进行了访问,针对不同用户,做出不同的响应cookie是一个很小的纯文本文件(最多为4K),是浏览器储存在用户的机器上的.储存一些服务器需要的信息,每次请求站点,会发送相应的cookie,这些co

  • 如何在JavaScript中使用localStorage详情

    如果你是一名开发人员,想要进入到.NET的世界,你需要知道都有哪些可能.由于.NET Framework是.NET生态系统中最流行的技术,你可以用它来构建各种各样的应用程序,但是最近,出现了一些新的东西,比如 .NET Core 和.NET Standard library.我们可以在项目或构建中使用它吗? localStorage对象是web编程中应用最广泛的对象之一.它提供了在用户计算机上本地存储键值对的简单解决方案. 大多数web开发人员都喜欢localStorage API,因为它具有简

  • vue 使用localstorage实现面包屑的操作

    mutation.js代码: changeRoute(state, val) { let routeList = state.routeList; let isFind = false; let findeIdex = 0; //菜单栏和下拉的二级菜单 if (val['type'] == 'header' || val['type'] == 'secondHeader') { routeList.length = 0; //顶级菜单清除缓存 localStorage.removeItem("r

  • 使用vuex存储用户信息到localStorage的实例

    1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi

  • JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

  • vue 界面刷新数据被清除 localStorage的使用详解

    localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1.新建一个store.js文件 localStorage只能存储字符串

随机推荐