数据持久化与临时存储的对决：localStorage 与 sessionStorage(下)

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 四、 `sessionStorage` 的使用场景和示例
    • 介绍 `sessionStorage` 在会话管理、临时数据存储等方面的用途
    • 提供一个使用 `sessionStorage` 存储购物车商品信息的示例
  • 五、 `localStorage` 和 `sessionStorage` 的注意事项
    • 强调数据存储大小限制和安全性考虑
    • 提醒用户可能遇到的跨域问题
  • 六、总结
    • 回顾 `localStorage` 和 `sessionStorage` 的主要特点和应用场景

四、 sessionStorage 的使用场景和示例

介绍 sessionStorage 在会话管理、临时数据存储等方面的用途

sessionStorage是 HTML5 提供的一种在浏览器中存储数据的方式，它用于在当前会话期间存储数据。与localStorage不同，sessionStorage的数据在浏览器关闭后会被自动清除。

以下是sessionStorage在会话管理和临时数据存储方面的一些常见用途：

  1. 会话状态管理：可以使用sessionStorage来存储与当前会话相关的数据，例如登录状态、用户信息等。这样，在用户在同一会话中浏览不同页面时，可以方便地获取和更新这些数据。

  2. 购物车管理：在电子商务网站中，可以使用sessionStorage来存储用户的购物车信息。当用户添加或删除商品时，购物车的数据可以实时更新，并且在用户关闭浏览器或会话结束后自动清除。

  3. 临时数据存储：sessionStorage可以用于存储一些临时的数据，例如用户在表单中输入的数据、临时生成的验证码等。这些数据在当前会话中可用，可以方便地在页面之间共享。

  4. 缓存数据：可以使用sessionStorage来缓存一些数据，例如查询结果、页面布局等。这样可以减少服务器请求，提高页面加载速度。

需要注意的是，sessionStorage的存储空间是有限的，不同的浏览器可能有不同的限制。通常，每个域名下的sessionStorage存储空间大约为 5MB 至 10MB。此外，sessionStorage仅在当前会话中可用，并且在浏览器关闭后会被清除。如果需要长期存储数据，建议使用localStorage或后端数据库。

提供一个使用 sessionStorage 存储购物车商品信息的示例

以下是一个简单的示例，使用 sessionStorage 来存储购物车商品信息：

<!DOCTYPE html>
<html>
<body>

<h2>购物车</h2>

<button onclick="addItemToCart()">添加商品</button>
<button onclick="clearCart()">清空购物车</button>

<ul id="cartItems"></ul>

<script>
// 获取或设置存储的购物车信息
function getCart() {
  return sessionStorage.getItem('cart') || [];
}

function setCart(cart) {
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// 添加商品到购物车
function addItemToCart() {
  var cart = getCart();
  cart.push({
    name: '商品名称',
    price: 10
  });
  setCart(cart);
  updateCartUI();
}

// 清空购物车
function clearCart() {
  sessionStorage.removeItem('cart');
  updateCartUI();
}

// 更新购物车 UI
function updateCartUI() {
  var cart = getCart();
  var cartItems = document.getElementById('cartItems');

  cartItems.innerHTML = '';
  for (var i = 0; i < cart.length; i++) {
    var item = cart[i];
    var li = document.createElement('li');
    li.textContent = item.name + ' - ' + item.price;
    cartItems.appendChild(li);
  }
}

// 在页面加载时，从 sessionStorage 中获取购物车信息，并更新 UI
document.addEventListener('DOMContentLoaded', function() {
  updateCartUI();
});
</script>

</body>
</html>

在这个示例中，我们使用 sessionStorage 来存储购物车信息。当用户点击 “添加商品” 按钮时，会将一个包含商品名称和价格的对象添加到购物车中，并通过 setCart() 方法将购物车信息存储到 sessionStorage 中。updateCartUI() 函数会根据购物车信息更新页面的 UI。

当用户点击 “清空购物车” 按钮时，会通过 clearCart() 方法从 sessionStorage 中删除购物车信息，并再次更新 UI。

请注意，这只是一个简单的示例，实际的购物车应用可能需要考虑更多的因素，如商品数量、删除商品、计算总价等。

五、 localStorage 和 sessionStorage 的注意事项

强调数据存储大小限制和安全性考虑

localStorage和sessionStorage是 HTML5 提供的两种在浏览器中存储数据的方式，它们都有一些注意事项，特别是在数据存储大小限制和安全性方面：

  1. 数据存储大小限制：

    localStorage和sessionStorage都有一定的存储大小限制。不同的浏览器可能有不同的限制，一般来说，localStorage的存储容量通常在几兆字节到几十兆字节之间，而sessionStorage的存储容量通常较小，一般在几百千字节到几兆字节之间。请注意，这些限制可能会因浏览器和操作系统而异。

    由于存储空间有限，你应该只存储必要的数据，并定期清理过期或不再需要的数据，以避免达到存储上限。如果需要存储大量数据，考虑使用后端数据库或其他外部存储解决方案。

  2. 安全性考虑：

    localStorage和sessionStorage的数据都是存储在客户端浏览器中的，因此它们可能受到一些安全风险的影响。他人可能通过访问同一台设备或使用恶意软件来获取存储的数据。

    对于敏感数据或需要保护的数据，不要将其存储在localStorage或sessionStorage中。如果必须存储敏感数据，请使用加密技术对其进行保护。

    另外，localStorage的数据在浏览器关闭后仍然可以保留，而sessionStorage的数据在会话结束后（例如关闭浏览器窗口或标签页）会被清除。因此，如果你存储了敏感数据在localStorage中，确保在适当的时候清除它们，例如在用户登出或浏览器关闭时。

总之，在使用localStorage和sessionStorage时，要注意数据存储大小限制，并谨慎处理敏感数据的存储和保护。根据实际需求选择合适的存储方式，并采取适当的安全措施来保护用户的数据隐私和安全性。

提醒用户可能遇到的跨域问题

localStorage和sessionStorage在使用时需要注意一些跨域问题。跨域是指当一个网页尝试访问来自不同域（域名、协议、端口）的资源时，可能会受到浏览器的安全限制。

以下是一些可能遇到的跨域问题及注意事项：

  1. 同源策略限制：浏览器的同源策略限制了脚本对不同源的访问。对于localStorage和sessionStorage，它们只能在同一源（相同的协议、域名和端口）的页面之间进行通信和共享数据。如果尝试在不同源的页面之间访问或修改localStorage或sessionStorage的数据，将会受到限制。

    例如，如果你在https://example.com的页面中设置了localStorage数据，然后在http://example.org的页面中尝试读取或修改该数据，将会失败，因为它们属于不同的源。

  2. 跨站请求伪造（CSRF）攻击：由于localStorage的数据可以在同一源的不同页面之间共享，如果一个恶意站点通过跨站请求伪造攻击（CSRF）获取了用户在其他站点的localStorage数据，就可能造成用户数据的泄露或其他安全问题。

    为了防止 CSRF 攻击，可以在涉及敏感操作的请求中使用 CSRF 令牌或其他验证机制来确保请求的合法性。

  3. 第三方 cookie 限制：某些浏览器（如 Chrome）实施了第三方 cookie 限制，这可能会影响通过localStorage或sessionStorage与第三方域名进行数据共享。在这种情况下，第三方域名可能无法直接访问或修改存储在localStorage或sessionStorage中的数据。

    如果你的应用涉及与第三方域名进行数据共享，可能需要考虑其他跨域数据共享的方式，如使用 CORS（跨域资源共享）或后端服务器进行数据传递。

总之，在使用localStorage和sessionStorage时，要注意同源策略限制、CSRF 攻击的风险以及可能的第三方 cookie 限制。如果需要在不同源的页面之间共享数据或与第三方进行数据交互，可能需要使用其他跨域技术或后端解决方案来确保数据的安全和正确性。

六、总结

回顾 localStorage 和 sessionStorage 的主要特点和应用场景

好的，以下是对localStorage和sessionStorage的主要特点和应用场景的回顾：

  1. 主要特点：
  • localStorage：
    • 持久性：存储的数据在浏览器关闭后仍然保留，除非手动清除。
    • 容量较大：通常可以存储几兆字节到几十兆字节的数据。
    • 跨窗口共享：同一域下的多个窗口或标签页可以共享localStorage数据。

在这里插入图片描述

  • sessionStorage：
    • 会话持久性：存储的数据在当前会话期间有效，一旦浏览器关闭或会话结束，数据将被清除。
    • 容量较小：一般限制在几百千字节到几兆字节之间。
    • 仅在当前窗口或标签页中可用：不同窗口或标签页之间的sessionStorage数据是隔离的。

在这里插入图片描述

  1. 应用场景：
  • localStorage：
    • 存储用户偏好设置、登录状态等需要长期保存的数据。
    • 缓存网页数据，减少服务器请求。
    • 实现离线应用功能，允许用户在离线状态下访问已缓存的数据。

在这里插入图片描述

  • sessionStorage：
    • 存储临时数据，如购物车信息、表单填写数据等，用于在当前会话中保持状态。
    • 在页面之间传递数据，实现页面间的通信。
    • 存储会话相关的敏感数据，例如令牌或会话 ID。

在这里插入图片描述

总之，选择使用localStorage还是sessionStorage取决于你的数据存储需求。如果需要长期存储数据或在多个窗口之间共享数据，使用localStorage更为合适；如果只需要在当前会话中存储数据，使用sessionStorage即可。在使用时，要注意数据的大小限制、安全性以及可能遇到的跨域问题。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/248562.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

泛型的相关内容

泛型的相关内容

首先我们来了解一下什么是泛型&#xff0c;泛型的作用又是什么。 泛型的形式是 ArrayList<Object> objects new ArrayList<>(); 这里的<Object>这个就是泛型&#xff0c;添加泛型的作用又是什么呢&#xff0c;它可以限制添加对象的类型&#xff0c;比如A…
阅读更多...
爬虫akamai案例：DHL国际物流

爬虫akamai案例：DHL国际物流

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、Akamai简介 Akamai是一家提供内容传递网络&#xff08;CDN&#xff09;和云服务的公司。CDN通过将内容分发到全球各地的服…
阅读更多...
系统运行占用过高

系统运行占用过高

1、CPU过高的问题排查 示例代码&#xff1a; public class Test { static class MyThread extends Thread { public void run() { // 死循环&#xff0c;消耗CPU int i 0; while (true) { i; } } } public static void main(String args[]) throws InterruptedException { ne…
阅读更多...
跟随鼠标动态显示线上点的值（基于Qt的开源绘图控件QCustomPlot进行二次开发）

跟随鼠标动态显示线上点的值（基于Qt的开源绘图控件QCustomPlot进行二次开发）

本文为转载 原文链接&#xff1a; 采用Qt快速绘制多条曲线&#xff08;折线&#xff09;&#xff0c;跟随鼠标动态显示线上点的值&#xff08;基于Qt的开源绘图控件QCustomPlot进行二次开发&#xff09; 内容如下 QCustomPlot是一个开源的基于Qt的第三方绘图库&#xff0c;能…
阅读更多...
docker镜像与容器的迁移

docker镜像与容器的迁移

docker容器迁移有两组命令&#xff0c;分别是 save & load &#xff1a;操作的是images&#xff0c; 所以要先把容器commit成镜像export & import&#xff1a;直接操作容器 我们先主要看看他们的区别&#xff1a; 一 把容器打包为镜像再迁移到其他服务器 如把mysq…
阅读更多...
大模型学习之GPT系列

大模型学习之GPT系列

GPT系列 预备知识GPT-1无监督预训练有监督的微调训练 GPT-2数据集&#xff1a;输入表示模型实验 GPT-3模型数据集实验局限性 InstructGPTGPT-4GPT-4 新特性基础能力 参考文献 大模型 GPT演进路线图 预备知识 Transformer 结构图 GPT-1 首先使用未标注的数据训练一个预训练…
阅读更多...
mac电脑html文件 局域网访问

mac电脑html文件 局域网访问

windows html文件 局域网访问 参考 https://blog.csdn.net/qq_38935512/article/details/103271291mac电脑html文件 局域网访问 开发工具vscode 安装vscode插件 Live Server 完成后打开项目的html 右键使用Live Server打开页面 效果如下&#xff0c;使用本地ip替换http://12…
阅读更多...
LVS负载均衡器（nat模式）+nginx（七层反向代理）+tomcat（多实例），实现负载均衡和动静分离

LVS负载均衡器（nat模式）+nginx（七层反向代理）+tomcat（多实例），实现负载均衡和动静分离

目录 前言 一、配置nfs共享存储 二、配置2个nginx节点服务的网页页面 节点1:192.168.20.10 步骤一&#xff1a;修改网关指向调度器的内网ip地址 步骤二&#xff1a;将nfs共享的目录进行挂载&#xff0c;并修改nginx的配置文件中location的root指向挂载点 步骤三&#xff…
阅读更多...
lua安装

lua安装

lua安装 1.Lua介绍 特点&#xff1a;轻量、小巧。C语言开发。开源。 设计的目的&#xff1a;嵌入到应用程序当中&#xff0c;提供灵活的扩展和定制化的功能。 luanginx&#xff0c;luaredis。 2.windows安装lua windows上安装lua&#xff1a; 检查机器上是否有lua C:\U…
阅读更多...
Shopee ERP：提升电商管理效率的终极解决方案

Shopee ERP：提升电商管理效率的终极解决方案

Shopee ERP&#xff08;Enterprise Resource Planning&#xff0c;企业资源规划&#xff09;是一款专为Shopee卖家设计的集成化电商管理软件。通过使用Shopee ERP系统&#xff0c;卖家可以更高效地管理他们的在线商店&#xff0c;实现库存管理、订单处理、物流跟踪、财务管理、…
阅读更多...
[Knowledge Distillation]论文分析：Distilling the Knowledge in a Neural Network

[Knowledge Distillation]论文分析：Distilling the Knowledge in a Neural Network

文章目录 一、完整代码二、论文解读2.1 介绍2.2 Distillation2.3 结果 三、整体总结 论文&#xff1a;Distilling the Knowledge in a Neural Network 作者&#xff1a;Geoffrey Hinton, Oriol Vinyals, Jeff Dean 时间&#xff1a;2015 一、完整代码 这里我们使用python代码进…
阅读更多...
vue 使用 Echarts做地图及飞线效果

vue 使用 Echarts做地图及飞线效果

前言&#xff1a; 效果图 一. 项目中安装以及引入Echarts 1.1 npm 命令安装echarts库 npm install echarts --save 1.2 yarn命令安装echarts库 yarn add echarts 1.3 引用 a. 在使用页面上引入 在Vue组件的script标签中引入echarts库 使用 echarts import * as echarts f…
阅读更多...
Kafka-Kafka基本原理与集群快速搭建（实践）

Kafka-Kafka基本原理与集群快速搭建（实践）

Kafka单机搭建 下载Kafka Apache Download Mirrors 解压 tar -zxvf kafka_2.12-3.4.0.tgz -C /usr/local/src/software/kafkakafka内部bin目录下有个内置的zookeeper(用于单机) 启动zookeeper&#xff08;在后台启动&#xff09; nohup bin/zookeeper-server-start.sh conf…
阅读更多...
MySQL运维5-Mycat配置

MySQL运维5-Mycat配置

一、schema.xml 1.1 简介 schema.xml作为Mycat中最重要的配置文件之一&#xff0c;涵盖了Mycat的逻辑库、逻辑表、分片规则、分片节点即数据源的配置。主要包括一下三组标签 schema标签 datanode标签 datahost标签 1.2 schema标签 用于定于Mycat实例中的逻辑库&#xff0c;一个…
阅读更多...
如何用 Cargo 管理 Rust 工程系列 丙

如何用 Cargo 管理 Rust 工程系列 丙

以下内容为本人的学习笔记&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/viSsCaFR2x9hZOvo1PoRqA 添加依赖项 前面已经提到过在 cargo 配置文件 Cargo.toml 中如何手动添加工程依赖项&#xff0c;cargo 同样提供了 add …
阅读更多...
万户 OA OfficeServer.jsp 任意文件上传漏洞复现

万户 OA OfficeServer.jsp 任意文件上传漏洞复现

0x01 产品简介 万户OA是面向政府组织及企事业单位的FlexOffice自主安全协同办公平台。 0x02 漏洞概述 万户OA OfficeServer.jsp接口存在任意文件上传漏洞，攻击者可通过该漏洞上传任意文件从而控制整个服务器。 0x03 复现环境 FOFA： (banner="OASESSIONID" &a…
阅读更多...
音频ncm格式转mp3格式

音频ncm格式转mp3格式

做个笔记&#xff0c;ncm格式转mp3格式 参考&#xff1a;传送门 import os import json import base64 import struct import logging import binascii from glob import glob from tqdm.auto import tqdm from textwrap import dedent from Crypto.Cipher import AES from mu…
阅读更多...
鸿蒙开发ArkTS语言-XML解析

鸿蒙开发ArkTS语言-XML解析

XML概述 XML&#xff08;可扩展标记语言&#xff09;是一种用于描述数据的标记语言&#xff0c;旨在提供一种通用的方式来传输和存储数据&#xff0c;特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此&#xff0c;XML更加灵活&#xff0c;并且可以适用于广泛的应用…
阅读更多...
深入理解 hash 和 history：网页导航的基础(下)

深入理解 hash 和 history：网页导航的基础(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
C语言——输出魔方阵

C语言——输出魔方阵

目录 一、前言&#xff1a; 二、算法设计&#xff1a; 三、代码实现&#xff1a; 五、效果展示&#xff1a; 一、前言&#xff1a; 魔方矩阵又称幻方&#xff0c;是有相同的行数和列数&#xff0c;并在每行每列、对角线上的和都相等的矩阵。魔方矩阵中的每个元素不能相同。你…
阅读更多...
最新文章

Copyright @ 2022~2023