前端存储之sessionStorage和localStorage

news/2024/3/28 18:21:22/文章来源:https://blog.csdn.net/study_way/article/details/131994632

sessionStorage

sessionStorage是一种用于web浏览器中临时保存数据的客户端存储机制。它允许在同一个浏览器窗口的会话期间,保存和访问临时数据,而这些数据在用户关闭窗口或者标签页会被清除。每个sessionStorage对象都与当前的浏览器会话相关联,当会话结束时,数据也将会被删除。

  1. 作用域:sessionStorage的数据仅在同一个浏览器窗口中共享,不同的窗口之间的数据是隔离的。即使在同一个域名下,不同窗口之间的sessionStorage也是独立。
  2. 生命周期:sessionStorage数据的生命周期限制在当前会话期间。会话期间指的是用户在同一个窗口中保持打开状态,只要用户在这个窗口中进行操作,数据就会一直保留。但一旦用户关闭了窗口或标签页,sessionStorage中的数据就会被清除。
  3. 存储容量:每个sessionStorage对象的存储容量通常在5M至10M之间。虽然比cookie的容易大很多,但仍然是有限制的。
  4. 存储类型:sessionStorage只能存储字符串类型的数据。如果需要存储其他数据类型,需要使用JSON.stringfy()将其转换为字符串进行存储,再使用JSON.parse()进行读取时转换回来的数据类型。
// 存储数据到sessionStorage
sessionStorage.setItem('username', 'John');
sessionStorage.setItem('isLoggedIn', 'true');// 从sessionStorage读取数据
const username = sessionStorage.getItem('username'); // "John"
const isLoggedIn = sessionStorage.getItem('isLoggedIn'); // "true"// 删除sessionStorage中的数据
sessionStorage.removeItem('username');
sessionStorage.removeItem('isLoggedIn');// 清空sessionStorage中的所有数据
sessionStorage.clear();

localStorage

localStorage是一种用于在web浏览器中持久保存数据的客户端存储机制。它允许在浏览器保存键值对形式的数据,并且这些数据在用户关闭浏览器后任然存在。
localStorage特点:

  1. 作用域:localStorage的数据在同一个域名下是共享的,不同的窗口之间也是共享的。即使在不同的浏览器窗口或标签页中,只要它们属于同一个域名,localStorage中的数据都是可以共享的。
  2. 生命周期:localStorage中的数据在浏览器中是持久保存的,除非被显式删除,或者用户清除了浏览器缓存。即使用户关闭了浏览器窗口或标签页,localStorage中的数据仍然保留,下次用户访问网站时依然可用。
  3. 存储容易:每个域名下的localStorage对象的存储容量通常在5MB至10MB之间(不同浏览器可能有所不同)。相比于cookie和sessionStorage,localStorage的存储容量较大,适合存储较大量的数据。
  4. 存储类型: localStorage只能存储字符串类型的数据。如果需要存储其他数据类型(例如对象或数组),需要使用JSON.stringify()将其转换为字符串进行存储,再使用JSON.parse()进行读取时转换回原来的数据类型。
    举个例子:
// 存储数据到localStorage
localStorage.setItem('username', 'John');
localStorage.setItem('isLoggedIn', 'true');// 从localStorage读取数据
const username = localStorage.getItem('username'); // "John"
const isLoggedIn = localStorage.getItem('isLoggedIn'); // "true"// 删除localStorage中的数据
localStorage.removeItem('username');
localStorage.removeItem('isLoggedIn');// 清空localStorage中的所有数据
localStorage.clear();

localStorage、sessionStorage、session的区别

cookiesessionStoragelocalStorage都是在前端用于存储数据的机制,但它们之间有一些重要的区别,主要体现在以下几个方面:

  1. 存储容量:

    • cookie:每个cookie的大小限制在4KB左右,每个域名下的cookie数量也有限制(通常为20个)。
    • sessionStorage:每个域名下sessionStorage的大小限制通常在5MB至10MB之间(不同浏览器可能有所不同)。
    • localStorage:每个域名下localStorage的大小限制通常在5MB至10MB之间(不同浏览器可能有所不同)。
  2. 生命周期:

    • cookie:可以设置过期时间,可以在过期时间之前一直存在于客户端。如果没有设置过期时间,则会话结束时cookie会被删除(即会话cookie)。
    • sessionStorage:数据在同一个会话(页面关闭前)中一直存在,关闭浏览器标签或窗口后会被清除。
    • localStorage:数据会一直存在,除非被显式删除或浏览器清除缓存。
  3. 作用域:

    • cookie:每个cookie都有域名的限制,只能在设置cookie的域名及其子域名下使用。
    • sessionStorage:数据仅限于同一个窗口(或同一个标签页)中,不同窗口或标签页之间的数据不共享。
    • localStorage:数据在同一个域名下共享,不同窗口或标签页之间的数据可以共享。
  4. 与服务器交互:

    • cookie:每次请求都会带上相应的cookie数据,因此可以用于与服务器交互,例如实现用户登录状态的保持。
    • sessionStoragelocalStorage:仅存在于客户端,不会随每次请求一起发送给服务器,只能在前端使用。
  5. 安全性:

    • cookie:由于每次请求都会带上cookie数据,如果包含敏感信息,需要特别注意安全性,并使用HttpOnlySecure等选项来增强安全性。
    • sessionStoragelocalStorage:数据仅在客户端保存,相对较安全,但不适合保存敏感信息。

根据以上的区别,可以根据具体的需求选择合适的存储方式。如果需要与服务器交互或保持登录状态等,可以使用cookie;如果仅在页面会话期间保存临时数据,可以使用sessionStorage;如果需要长期保存数据或在不同页面共享数据,可以使用localStorage

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

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

相关文章

Spark(37):Streaming DataFrame 和 Streaming DataSet 创建

目录 0. 相关文章链接 1. 概述 2. socket source 3. file source 3.1. 读取普通文件夹内的文件 3.2. 读取自动分区的文件夹内的文件 4. kafka source 4.1. 导入依赖 4.2. 以 Streaming 模式创建 Kafka 工作流 4.3. 通过 Batch 模式创建 Kafka 工作流 5. Rate Source…

2023牛客暑期多校-J-Qu‘est-ce Que C‘est?(DP)

题意: 给定长度为n的数列,要求每个数都在的范围,且任意长度大于等于2的区间和都大于等于0,问方案数。。 思路: 首先要看出是dp题,用来表示遍历到第i位且后缀和最小为x的可行方案数(此时的后缀可以只有最…

Java 版 spring cloud +spring boot 工程系统管理 工程项目管理系统源码 工程项目各模块及其功能点清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典:实现对数据字典标签的增删改查操作 2、编码管理:实现对系统编码的增删改查操作 3、用户管理:管理和查看用户角色 4、菜单管理:实现对系统菜单的增删改查操…

linux下nginx的安装和使用

文章目录 📒安装nginx正常使用nginx包安装1️⃣上传到对应目录2️⃣解压nginx3️⃣检查是否启动成功 使用docker安装nginx 📒使用nginx1️⃣简单的反向代理2️⃣介绍location配置中root和alias的区别 📒安装nginx 正常使用nginx包安装 官网…

BLE基础理论/Android BLE开发示例

参考:https://blog.csdn.net/qq_36075612/article/details/127739150?spm1001.2014.3001.5502 参考: https://blog.csdn.net/qq_36075612/article/details/122772966?spm1001.2014.3001.5502 目录 蓝牙的分类传统蓝牙低功耗蓝牙 蓝牙专业词汇&#xff…

SpringAOP的相关概念

文章目录 一.什么是AOP二.AOP的组成部分三.SpringAOP的实现3.1 增加SpringAOP依赖3.2 创建切面3.2 创建切点3.3 创建通知3.4 创建连接点 四.SpringAOP的实现原理4.1 JDK动态代理4.2 CGLIB 动态代理总结 一.什么是AOP AOP,全称为Aspect-Oriented Programming&#x…

解决 tensorflow 出现的 ImportError: Could not find the DLL(s) ‘msvcp140_1.dll‘. 问题

在安装完tensorflow库后出现 问题详述: ImportError: Could not find the DLL(s) msvcp140_1.dll. TensorFlow requires that these DLLs be installed in a directory that is named in your %PATH% environment variable. You may install these DLLs by downlo…

新零售行业如何做会员管理和会员营销

蚓链数字化营销系统全渠道会员管理解决方案,线上线下统一管理,打造私域流量,微信、门店会员全渠道管理,打通私域流量池,实现裂变营销: 开启新零售之路,必然要摒弃原有的管理模式,大…

郑州多域名https证书

多域名https证书是https证书中比较特殊的一款,它保护的域名记录是众多https证书中最灵活的。不管是DV基础型的多域名https证书还是OV企业型和EV增强型的多域名https证书既可以保护多个主域名或者子域名,还可以主域名子域名随意组合,只要申请者…

【动态规划part11】| 123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

目录 🎈LeetCode123.买卖股票的最佳时机III 🎈LeetCode188.买卖股票的最佳时机IV 🎈LeetCode123.买卖股票的最佳时机III 链接:123.买卖股票的最佳时机III 给定一个数组,它的第 i 个元素是一支给定的股票在第 i…

无涯教程-jQuery - Pulsate方法函数

Pulsate 效果可以与effect()方法一起使用。这会使元素的不透明性产生多次脉冲。 Pulsate - 语法 selector.effect( "pulsate", {arguments}, speed ); 这是所有参数的描述- times - 脉动的时间。默认值为3。model - 效果的模式。可以是"显示(show)"&a…

基于Java+SpringBoot+vue前后端分离技术交流和分享平台设计实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

Moke 一百万条 Mysql 的数据

文章目录 前言创建数据库创建表结构生成数据 前言 想研究一下,数据量大的情况下,如何优化前端分页,所以需要 Moke 一些数据 创建数据库 在 Mysql的基础上,可以写个语句执行 CREATE DATABASE test_oneMillion; USE test_oneMi…

JAVA SE -- 第十一天

(全部来自“韩顺平教育”) 异常-Exception 一、异常介绍 1、基本介绍 Java语言中,将程序执行中发生的不正常情况为“异常”(开发过程中的语法错误和逻辑错误不是异常) 2、执行过程中发生的异常事件可分为两大类 …

Reinforcement Learning with Code 【Chapter 9. Policy Gradient Methods】

Reinforcement Learning with Code This note records how the author begin to learn RL. Both theoretical understanding and code practice are presented. Many material are referenced such as ZhaoShiyu’s Mathematical Foundation of Reinforcement Learning, . 文章…

opencv+ffmpeg环境(ubuntu)搭建全面详解

一.先讲讲opencv和ffmpeg之间的关系 1.1它们之间的联系 我们知道opencv主要是用来做图像处理的,但也包含视频解码的功能,而在视频解码部分的功能opencv是使用了ffmpeg。所以它们都是可以处理图像和视频的编解码,我个人感觉两个的侧重点不一…

SpringBoot项目部署(前后端分离、Linux部署项目)

一、架构 部署环境说明: 192.168.122.100(服务器A): Nginx:部署前端项目、配置反向代理 Mysql:主从复制结构中的主库 192.168.122.131 (服务器B): jdk: 运行Java项目 git:版本控制工具 (从gitee中拉取源码) maven:…

数据结构:快速的Redis有哪些慢操作?

redis 为什么要这莫快?一个就是他是基于内存的,另外一个就是他是他的数据结构 说到这儿,你肯定会说:“这个我知道,不就是 String(字符串)、List(列表)、 Hash&#xff08…

【SpringCloud Alibaba】(五)服务雪崩与容错方案

在前面的文章中,我们实现了用户微服务、商品微服务和订单微服务之间的远程调用,并且实现了服务调用的负载均衡。 但是,现在系统中存在着一个很明显的问题:那就是如果系统的并发量上来后,系统并没有容错的能力&#xf…

Java | 继承、多态、抽象类与接口

目录 一、类的继承 二、Object类 2.1 getClass()方法 2.2 toString()方法 2.3 equals()方法 三 、对象类型的转换 3.1 向上转换 3.2 向下转型 四、使用instanceof关键字判断对象类型 五、方法的重载 六、final关键字 6.1 final变量 6.2 final方法 6.3 final类 七…