【JavaScript】localStorage 和 sessionStorage

文章目录

    • 1. localStorage和sessionStorage的概念
      • localStorage
      • sessionStorage
    • 2. localStorage和sessionStorage的使用
      • 设置数据
      • 读取数据
      • 删除数据
      • 清空所有数据
    • 3. localStorage和sessionStorage的应用场景
      • localStorage
      • sessionStorage
    • 4. 安全性注意事项
    • 5. 总结

在前端开发中, 本地存储是一种重要的技术,它能够在用户浏览器中存储和检索数据。localStorage 和 sessionStorage 是两个常用的 Web 存储 API,本篇博客将介绍它们的概念、使用方式以及适用场景。

1. localStorage和sessionStorage的概念

localStorage

  • 特点:localStorage用于长期存储数据,即使用户关闭浏览器或重新启动计算机,数据仍然保持不变。
  • 生命周期:数据会一直存在,直到通过JavaScript或用户手动删除。

sessionStorage

  • 特点:sessionStorage用于临时存储数据,数据仅在当前会话期间有效。当用户关闭浏览器标签页或窗口时,数据将被删除。
  • 生命周期:数据在同一个浏览器窗口或标签页中共享,并在窗口或标签页关闭时被清除。

2. localStorage和sessionStorage的使用

设置数据

// 使用localStorage设置数据
localStorage.setItem("username", "JohnDoe");// 使用sessionStorage设置数据
sessionStorage.setItem("theme", "light");

在上述例子中,通过setItem方法设置localStorage和sessionStorage中的数据,键值对的形式存储。

读取数据

// 使用localStorage读取数据
let username = localStorage.getItem("username");// 使用sessionStorage读取数据
let theme = sessionStorage.getItem("theme");

通过getItem方法可以从localStorage和sessionStorage中读取数据。

删除数据

// 使用localStorage删除数据
localStorage.removeItem("username");// 使用sessionStorage删除数据
sessionStorage.removeItem("theme");

通过removeItem方法可以从localStorage和sessionStorage中删除指定的数据。

清空所有数据

// 清空localStorage中所有数据
localStorage.clear();// 清空sessionStorage中所有数据
sessionStorage.clear();

通过clear方法可以清空localStorage和sessionStorage中的所有数据。

3. localStorage和sessionStorage的应用场景

localStorage

  • 用户偏好设置:存储用户选择的主题、语言等偏好设置
  • 长期登录状态:记住用户的登录状态,使用户下次访问时无需重新登录
  • 缓存数据:将一些静态数据缓存在localStorage中,减少重复请求

sessionStorage

  • 临时数据传递:在不同页面或组件之间传递临时数据
  • 表单数据保存:在多步骤表单中,可以将中间结果保存在sessionStorage中
  • 页面刷新数据保持:在页面刷新时,可以使用sessionStorage保持一些状态

4. 安全性注意事项

  • 敏感信息:避免在localStorage和sessionStorage中存储敏感信息,如密码等
  • 存储限制:localStorage和sessionStorage的存储容量有限,不适合存储大量数据

5. 总结

localStorage和sessionStorage是前端常用的本地存储方式,它们提供了简单的API来存储和检索数据。localStorage适用于长期存储,而sessionStorage适用于短期存储。根据应用场景和数据生命周期的需求,选择合适的存储方式是非常重要的。希望通过本篇博客,你对localStorage和sessionStorage的概念、使用方式以及适用场景有了更深入的了解。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS篇--transform

CSS篇–transform 使用transform属性实现元素的位移、旋转、缩放等效果 位移 // 语法 transform:translate(水平移动距离,垂直移动距离) translate() 如果只给一个值,表示x轴方法移动距离 单独设置某个方向的移动距离:translateX() transla…

Debezium发布历史133

原文地址: https://debezium.io/blog/2022/10/26/debezium-1-9-7-final-released/ 欢迎关注留言,我是收集整理小能手,工具翻译,仅供参考,笔芯笔芯. Debezium 1.9.7.Final Released October 26, 2022 by Chris Cranfo…

林浩然与杨凌芸的Java时光魔法:格式化历险记

林浩然与杨凌芸的Java时光魔法:格式化历险记 The Java Time Odyssey of Lin Haoran and Yang Lingyun: A Formatting Adventure 在编程世界的一隅,有一个名叫林浩然的程序员。他是个Java大侠,对代码世界的法则了如指掌,尤其擅长驾…

用HTML和CSS打造跨年烟花秀视觉盛宴

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>跨年烟花秀</title><meta name"viewport" content"widthdevi…

HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-信号量semaphore

目录 一、信号量基本概念二、信号量运行机制三、信号量开发流程四、信号量接口五、代码分析&#xff08;待续...&#xff09;坚持就有收获 一、信号量基本概念 信号量&#xff08;Semaphore&#xff09;是一种实现任务间通信的机制&#xff0c;可以实现任务间同步或共享资源的…

[02] Vue指令(1)

目录 Vue中的常用指令内容渲染指令条件渲染指令事件绑定指令内联语句事件处理函数调用传参 Vue中的常用指令 概念&#xff1a;指令&#xff08;Directives&#xff09;是Vue提供的带有v- 前缀的特殊标签属性。 vue 中的指令按照不同的用途可以分为如下 6 大类&#xff1a; 内容…

Ubuntu学习笔记-Ubuntu搭建禅道开源版及基本使用

文章目录 概述一、Ubuntu中安装1.1 复制下载安装包路径1.2 将安装包解压到ubuntu中1.3 启动服务1.4 设置开机自启动 二、禅道服务基本操作2.1 启动&#xff0c;停止&#xff0c;重启&#xff0c;查看服务状态2.2 开放端口2.3 访问和登录禅道 卜相机关 卜三命、相万生&#xff0…

算法学习——LeetCode力扣二叉树篇7

算法学习——LeetCode力扣二叉树篇7 236. 二叉树的最近公共祖先 236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点…

正则表达式预查寻也称断言,限定左右相邻内容

正则表达式预查寻也称断言,限定左右相邻内容 正则表达式预查寻分为 4 种: 正向肯定预查: (?pattern) (?pattern)正向否定预查: (?!pattern) (?!pattern)反向肯定预查: (?<pattern) (?<pattern)反向否定预查: (?<!pattern) (?<!pattern) 比如: 匹配 babc…

揭开Markdown的秘籍:引用|代码块|超链接

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;Markdown指南、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️Markdown 引用1.1 &#x1f514;引用1.2 &#x1f514;嵌套引用1.3 &…

中科院一区论文复现,改进蜣螂算法,Fuch映射+反向学习+自适应步长+随机差分变异,MATLAB代码...

本期文章复现一篇发表于2024年来自中科院一区TOP顶刊《Energy》的改进蜣螂算法。 论文引用如下&#xff1a; Li Y, Sun K, Yao Q, et al. A dual-optimization wind speed forecasting model based on deep learning and improved dung beetle optimization algorithm[J]. Ener…

从本次战疫,作为普通人可以学到的东西

前人不忘&#xff0c;后事之师。 从本次疫情的控制&#xff0c;可以学到什么&#xff1f; 早发现&#xff0c;早隔离&#xff0c;早识别&#xff0c;早就诊。 定位传染源&#xff0c;传播途径&#xff0c;传播方法&#xff0c;确定潜伏期&#xff0c;检测方法&#xff0c;确认…

php基础学习之可变函数(web渗透测试关键字绕过rce和回调函数)

可变函数 看可变函数的知识点之前&#xff0c;蒟蒻博主建议你先去看看php的可变变量&#xff0c;会更加方便理解&#xff0c;在本篇博客中的第五块知识点->php基础学习之变量-CSDN博客 描述 当一个变量所保存的值刚好是一个函数的名字&#xff08;由函数命名规则可知该值必…

anomalib1.0学习纪实-续1:增加新算法

0、基本信息 现在我要增加一个新算法&#xff1a;DDAD 他的代码&#xff0c;可以在github中找到&#xff1a;GitHub - arimousa/DDAD 一、基础操作&#xff1a; 1、修改anomalib\src\anomalib\models\__init__.py 我增加的第33行和61行&#xff0c; 2、 增加ddad文件夹和文…

Sora和Pika,RunwayMl,Stable Video对比!网友:Sora真王者,其他都是弟

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

《区块链公链数据分析简易速速上手小册》第1章:区块链基础(2024 最新版)

文章目录 1.1 区块链技术概览&#xff1a;深入探究与实用案例1.1.1 区块链的核心概念1.1.2 重点案例&#xff1a;供应链管理1.1.3 拓展案例 1&#xff1a;数字身份验证1.1.4 拓展案例 2&#xff1a;智能合约在房地产交易中的应用 1.2 主流公链介绍1.2.1 公链的核心概念1.2.2 重…

Sora:将文本转化为视频的创新之旅

一.能力 我们正致力于让 AI 掌握理解和模拟物理世界动态的能力&#xff0c;旨在培养能够协助人们解决现实世界互动问题的模型。 介绍 Sora——我们开发的文本到视频转换模型。Sora 能够根据用户的输入提示&#xff0c;生成最长达一分钟的高质量视频内容。 目前&#xff0c;Sora…

已解决ValueError: All arrays must be of the same length异常的正确解决方法,亲测有效!!!

已解决ValueError: All arrays must be of the same length异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 在数据处理和分析领域&#xff0c;尤其是使用Pandas库进行操作时&#xff0…

配置oracle连接管理器(cman)

Oracle Connection Manager是一个软件组件&#xff0c;可以在oracle客户端上指定安装这个组件&#xff0c;Oracle连接管理器代理发送给数据库服务器的请求&#xff0c;在连接管理器中&#xff0c;我们可以通过配置各种规则来控制会话访问。 简而言之&#xff0c;不同于专用连接…

网络安全的新防线:主动进攻,预防为先

进攻性安全&#xff08;Offensive security&#xff09;是指一系列主动安全策略&#xff0c;这些策略与恶意行为者在现实世界的攻击中使用的策略相同&#xff0c;区别在于其目的是加强而非损害网络安全。常见的进攻性安全方法包括红队、渗透测试和漏洞评估。 进攻性安全行动通常…