一文了解localStorage 和 sessionStorage

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 JavaScript 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

这篇文章瑶琴带大家学习 JavaScript 中的localStorage 和 sessionStorage的用法

localStorage 和 sessionStorage 都是 window 对象的属性。它们在全局作用域内是可访问的,可以通过 window 对象来引用它们。

1.localStorage

  1. 永久性存储:数据在页面会话结束后依然存在,直到主动删除。

  2. 容量限制:大多数浏览器为 localStorage 提供了大约5MB的存储空间。

  3. 同源限制:只有来自同一源(协议、域名和端口号都相同)的页面才能共享 localStorage 中的数据。

// 存储数据 
localStorage.setItem('username', 'JohnDoe'); // 读取数据 
let username = localStorage.getItem('username'); 
console.log(username); // 输出: JohnDoe // 删除单个数据项 
localStorage.removeItem('username'); // 清空所有数据 
localStorage.clear();

2.sessionStorage

1.会话性存储:数据只在单个会话期间可用,即只在浏览器打开的情况下有效,并且页面一旦关闭,数据就会被清除。

2.容量限制:与 localStorage 类似,大多数浏览器也为 sessionStorage 提供了大约5MB的存储空间。

3.独立性:同一源的不同页面或标签页拥有独立的 sessionStorage 空间。

// 存储数据
sessionStorage.setItem('viewedPage', 'homepage');
// 读取数据let page = sessionStorage.getItem('viewedPage');console.log(page); 
// 输出: homepage
// 页面关闭或刷新后,sessionStorage 中的数据将被清除

下面是常用方法和属性:

setItem(key, value) - 将键值对存储在存储对象中。

getItem(key) - 从一个存储对象中读取数据。

removeItem(key) - 从一个存储对象中移除指定的键值对。

clear() - 清空存储对象中的所有数据。

key(index) - 可以从存储对象中按索引顺序获取一个键。

length - 返回存储对象中的键值对数量。

注意事项:

1.存储的数据是字符串类型,如果需要存储对象或其他数据类型,需要先转换为字符串(通常使用 JSON.stringify()),读取时再转换回原来的类型(使用 JSON.parse())。

2.Web存储不是加密的,不应该用来存储敏感信息。

3.Web存储的大小限制比Cookies宽松,但仍然有限,对于大量数据的存储,应考虑使用数据库或服务器端存储。

3. 案例

1.记住用户偏好:存储用户的首选语言、主题等偏好设置。

if (!localStorage.getItem('userTheme')) { localStorage.setItem('userTheme', 'light'); 
} 
let theme = localStorage.getItem('userTheme');// 根据主题设置页面样式

2.表单自动填充:存储用户之前填写的表单数据,以便在下次访问时自动填充。

// 存储表单数据 
localStorage.setItem('formData', JSON.stringify({ name: 'John Doe', email: 'john@example.com' }));// 在表单加载时自动填充数据 
let formData = JSON.parse(localStorage.getItem('formData')); 
if (formData) { document.getElementById('name').value = formData.name; document.getElementById('email').value = formData.email; 
}

对于前端来说,这两个属性都是Web存储 API 的一部分,它们提供了一种在用户浏览器中存储数据的方式,使得数据可以在不同的页面加载之间持久化存储,初学者可以结合上面的例子自己实践。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

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

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

相关文章

Linux - 复盘一次句柄数引发的故障

文章目录 Pre(内核、用户、进程)句柄数设置问题 shell修复 Pre Linux - 深入理解/proc虚拟文件系统:从基础到高级 (内核、用户、进程)句柄数设置 在Linux系统中,进程打开的最大句柄数可以通过多种方式配置…

第二证券:大牛股连续七跌停,上市公司坐不住了!机构抄底

6月12日,沪深股市双双飘红。但是,从前的大牛股松炀资源(603863),却依然跌停收盘。这也是公司股价近日来的接连第七个跌停板。 龙虎榜显现,6月12日,松炀资源全天换手率10.38%,成交额3.45亿元。当天&#xf…

沉降观测点的定义、重要性、建设与选择

沉降观测点,简称沉降点,是指在建筑物、构筑物或地基等结构物上设置的用于测量其垂直位移(沉降)的特定位置。这些点通常被标记并安装相应的监测设备,以便长期、连续地监测结构物的沉降情况。 点击输入图片描述(最多30字&#xff09…

炒股的另外一种思路

曾经偶然机会,买了 h 一只股票放了七年左右,不多但是让我看到另外一种投资方法 整个经济中,有些公司是你想去但是可能没机会去的,行业也比较看好,那就选择买他们家股票,因为大概率他们是赢取了市场平均收益…

python接入汇率换算工具提高网站/小程序日活度

实时汇率换算工具可以帮助用户快速准确地计算不同货币之间最新的汇兑比例。无论是金融从业者或者是人们日常生活出行都会使用到,广泛用于国际结算、银行汇率查询应用、开展跨国贸易、投资等参考场景。 我们可以通过在网站或者小程序中接入这样一个小工具&#xff0…

【Ardiuno】实验ESP32单片机自动配置Wifi功能(图文)

这里小飞鱼按照ESP32的示例代码,实验一下wifi的自动配置功能。所谓的自动配置,就是不用提前将wifi的名称和密码写到程序里,这样可以保证程序在烧录上传后,可以通过手机端的软件来进行配置,可以避免反复修改代码&#x…

ChromeOS 逐渐靠近安卓

ChromeOS 逐渐 “安卓化” 谷歌在博客中透露,将在ChromeOS底层更广泛地使用和Android相同的技术栈。一个具体的例子是,ChromeOS现在已经开始使用Android的蓝牙协议栈,取代了之前使用的自己的协议栈。这次改变不仅提高了蓝牙配对速度&#xf…

什么是Rademacher复杂度(Rademacher Complexity)

Rademacher复杂度(Rademacher Complexity)是在学习理论中用于衡量函数类复杂度的一种工具,特别是在评估机器学习模型泛化能力时。它提供了一种量化学习算法可能过拟合数据的程度的方法。Rademacher复杂度定义了函数类在给定数据集上的随机化复…

Postman下发流表至Opendaylight

目录 任务目的 任务内容 实验原理 实验环境 实验过程 1、打开ODL控制器 2、网页端打开ODL控制页面 3、创建拓扑 4、Postman中查看交换机的信息 5、L2层流表下发 6、L3层流表下发 7、L4层流表下发 任务目的 1、掌握OpenFlow流表相关知识,理解SDN网络中L…

【vue-8】记事本案例

小知识点&#xff1a; 列表末尾插入数据&#xff1a; list.push("lihua") 列表删除数据&#xff1a; # index要删除数据的索引值&#xff0c;1为删除数据长度 list.splice(index,1) 完整示例代码&#xff1a; <!DOCTYPE html> <html lang"en&quo…

Oracle数据库查询常用语句

Oracle数据库查询常用语句 文章目录 Oracle数据库查询常用语句一、时间查询1、查询当天得数据 二、 一、时间查询 1、查询当天得数据 1、字段名为PLAN_DAY&#xff0c;字段类型为DATE 使用SYSDATE函数来获取当前日期&#xff0c;并且使用比较运算符来过滤出当天的记录。Oracle…

R语言ggHoriPlot包绘制地平线图

数据和代码获取&#xff1a;请查看主页个人信息&#xff01;&#xff01;&#xff01; 关键词“地平线图” 1. 数据读取与处理 首先&#xff0c;从TSV文件中读取数据&#xff0c;并进行数据清洗和处理。 rm(listls()) pacman::p_load(tidyverse,ggalt,ggHoriPlot,hrbrthemes…

教程:A5000 GPU 上运行阿里最新开源大模型 Qwen2

这是我们新一篇关于大模型的文章&#xff0c;我们此前还讲过如何运行 LLama3 大模型。而这次&#xff0c;我们将使用 Ollama 运行阿里千问Qwen2:7b。要知道 Qwen2 可是目前最热门的开源大语言模型了&#xff0c;甚至在一些性能测试中比 LLama3 表现还突出。谁不想试试看呢&…

创建FileInputStream对象不使用filePath,而是用字节流数组,怎么改

改之前 fileInputStream new FileInputStream(new File(filePath)); fileReader new PdfReader(fileInputStream); fileDocunment new PdfDocument(fileReader);改之后 如果你有一个字节流数组&#xff08;byte array&#xff09;而不是文件的路径&#xff0c;并且你想要使…

C#下WinForm多语种切换

这是应一个网友要求写的&#xff0c;希望对你有所帮助。本文将介绍如何在一个WinForm应用程序中实现多语种切换。通过一个简单的示例&#xff0c;你将了解到如何使用资源文件管理不同语言的文本&#xff0c;并通过用户界面实现语言切换。 创建WinForm项目 打开Visual Studio&a…

最新下载:XmanagerXShell【软件附加安装教程】

​XManager企业版是一款完整的企业网络连接套件&#xff0c;它配备了一个高性能的PC服务器&#xff0c;安全终端模拟器&#xff0c;是一个一体化的解决方案&#xff0c;将xmanager&#xff0c;xshell&#xff0c;xftp&#xff0c;xlpd&#xff0c;Xbrowser及xstart放置在一个软…

代码随想录算法训练营DAY37| 56. 合并区间、738.单调递增的数字、968.监控二叉树、总结

56.合并区间 题目链接&#xff1a;56. 合并区间 class Solution(object):def merge(self, intervals):""":type intervals: List[List[int]]:rtype: List[List[int]]"""intervals.sort(key lambda x:x[0])i0while i<len(intervals)-1:if i…

C#发送邮件

C#发送邮件代码&#xff0c;亲测可用。 using System; using System.Net; using System.Net.Mail;namespace MailSend {class Program{static void Main(string[] args){try{MailAddress receiver new MailAddress("666666666qq.com");//666666666qq.com 换成收件人…

前端面试题日常练-day66 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 TypeScript中&#xff0c;以下哪个关键字用于声明一个类的静态属性或方法&#xff1f; a) static b) const c) let d) final 在TypeScript中&#xff0c;以下哪个符号用于声明一个变量的类型为任意类…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十(整体布局03之界面美化)

删除style.css 删除style.css(和main.ts同级) 并且注释掉main.ts中对style.css的导入。 修改App.vue 添加样式设置高度100% 安装sass pnpm install -D sass修改PageSidebar.vue 修改index.vue 修改src/layout/index.vue src/layout/index.vue添加样式 <style lang&quo…