Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JS中的localStorage怎么用?能存什么?_创想鸟

JS中的localStorage怎么用?能存什么?

localstorage 是 js 中用于持久化存储字符串数据的工具,即使页面刷新或浏览器关闭也不会丢失。它仅支持字符串类型,存储对象或数组时需先用 json.stringify() 转换,读取时用 json.parse() 还原。1. 存数据用 setitem(key, value);2. 取数据用 getitem(key);3. 删数据用 removeitem(key);4. 清空用 clear();5. 查看 key 用 key(index)。适合存用户偏好、静态缓存等非敏感信息,不适合频繁修改或敏感数据。使用时需注意:必须手动转换数据类型、避免超限、不可跨域共享、频繁读写影响性能,建议结合默认值处理以提高健壮性。

JS中的localStorage怎么用?能存什么?

localStorage 是 JS 里用来做本地存储的一个工具,简单又实用。它能存字符串数据,即使页面刷新或者浏览器关闭了,数据也不会丢。关键在于怎么用对地方,别乱用。

localStorage 能存什么?

localStorage 只支持字符串类型的数据。如果你要存对象、数组、数字这些,得先转成字符串。最常用的方法就是 JSON.stringify()

比如:

const user = { name: "Tom", age: 25 };localStorage.setItem("user", JSON.stringify(user));

反过来取的时候要用 JSON.parse() 把字符串还原回来:

const storedUser = JSON.parse(localStorage.getItem("user"));

别想着存函数或者 undefined,那些会被忽略或者出错。

基本操作:增删改查

localStorage 的 API 很简单,就几个方法:

存数据:localStorage.setItem(key, value)取数据:localStorage.getItem(key)删数据:localStorage.removeItem(key)清空所有:localStorage.clear()查看 key:localStorage.key(index)(用于遍历)

举个例子:

localStorage.setItem("theme", "dark");console.log(localStorage.getItem("theme")); // 输出 "dark"localStorage.removeItem("theme");

注意:虽然操作起来像对象赋值一样方便,但它是同步的,不能异步操作,大数据量可能会卡界面。

什么时候适合用 localStorage?

需要持久化保存用户偏好,比如主题、语言设置。存 token 或登录状态信息(不过要注意安全问题)。做缓存,减少重复请求,比如一些静态配置数据。不适合频繁变动的数据,也不适合敏感信息(因为是明文存储)。

如果只是临时用一下,可以用 sessionStorage,关掉标签页就自动清了。

使用时容易踩的坑

忘记转字符串:直接塞对象进去会变成 [object Object]超过容量限制:主流浏览器一般是 5MB 左右,超了会报错。跨域不共享:不同域名下的 localStorage 是隔离的,子域名也不行。读写频繁影响性能:特别是循环里面频繁 setItem,尽量合并操作。

建议在存之前判断是否存在,取值之后也最好做下默认值处理:

const theme = localStorage.getItem("theme") || "default";

基本上就这些。localStorage 用起来不难,但要注意场景和规范,别滥用就行。

以上就是JS中的localStorage怎么用?能存什么?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1505672.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JS中的encodeURI和encodeURIComponent有什么区别?
上一篇 2025年12月20日 03:52:30
JS中的闭包是什么?如何实现?
下一篇 2025年12月20日 03:52:46

相关推荐

  • JavaScript中的模块联邦如何实现微前端的代码共享?

    模块联邦通过运行时动态加载实现微前端代码共享,无需打包公共依赖。使用 ModuleFederationPlugin 配置 name、remotes、exposes 和 shared,使应用可暴露或引入远程模块,支持组件、工具函数及状态管理共享,提升复用性并减少冗余。 模块联邦通过在构建时让不同应用直…

    2026年9月21日
    100
  • 如何系统学习蝴蝶号无人直播运营的核心知识

    如何系统学习蝴蝶号无人直播运营的核心知识如何系统学习蝴蝶号无人直播运营的核心知识如何系统学习蝴蝶号无人直播运营的核心知识如何系统学习蝴蝶号无人直播运营的核心知识

    要系统学习蝴蝶号无人直播运营的核心知识,首先要理解平台逻辑、制定精细化内容策略、掌握自动化技术并持续进行数据分析与风险控制。具体包括:一是深入研究平台算法和规则边界,确保操作合规;二是构建高质量、多样化且合规的内容素材库,并进行标签化管理;三是选择安全可靠的自动化工具,避免使用违规软件;四是模拟真人…

    2026年9月21日 用户投稿
    200
  • OPPO官宣哈苏专业影像套装:为Find X9系列打造“口袋中的完全体哈苏”

    OPPO官宣哈苏专业影像套装:为Find X9系列打造“口袋中的完全体哈苏”OPPO官宣哈苏专业影像套装:为Find X9系列打造“口袋中的完全体哈苏”OPPO官宣哈苏专业影像套装:为Find X9系列打造“口袋中的完全体哈苏”OPPO官宣哈苏专业影像套装:为Find X9系列打造“口袋中的完全体哈苏”

    10月13日,oppo正式宣布将发布哈苏专业影像套装,涵盖哈苏专业增距镜、全新磁吸手柄、磁吸保护壳以及专业手机肩带等配件。该套装被官方誉为“口袋里的完整版哈苏”,主打“追星无需携带相机”的理念,将于10月16日随find x9系列一同亮相,并专为find x9 pro机型优化适配。 图片来源@OPP…

    2026年9月21日 用户投稿
    000
  • 如何通过tracert命令追踪数据包从本地到目标服务器的完整路径?

    打开命令提示符,输入cmd并回车;2. 执行tracert 目标地址命令追踪路径;3. 查看每跳响应时间与IP,分析延迟变化定位网络瓶颈;4. 注意部分节点可能因防火墙不响应导致超时。 使用 tracert(Windows 系统)命令可以追踪数据包从你的计算机到目标服务器所经过的每一跳网络节点,帮助…

    2026年9月21日
    900
  • windows怎么清除dns缓存_dns缓存刷新命令详解

    1、刷新DNS缓存可解决网页无法加载或域名解析错误问题。2、通过命令提示符执行ipconfig /flushdns清除系统DNS缓存。3、以管理员身份运行命令提示符并重启DNS Client服务(net stop dnscache和net start dnscache)恢复服务功能。4、在Chrom…

    2026年9月21日
    000
  • Linux interfaces 虚拟网络类型了解01

    Linux interfaces 虚拟网络类型了解01Linux interfaces 虚拟网络类型了解01Linux interfaces 虚拟网络类型了解01Linux interfaces 虚拟网络类型了解01

    在osi模型的定义中,数据链路层和物理层,以及传输层和网络层执行的任务在概念上相似:它们都提供了数据传输的方式,即沿着特定路径将数据从源点传输到目的地的方法。然而,数据链路层和物理层负责跨物理路径的通信服务,而传输层和网络层则提供由多个数据链路组成的逻辑路径或虚拟路径的通信服务。 Bridge操作指…

    2026年9月21日 用户投稿
    000
  • 直面前作教训 《战地6》负责人称要打造”最完美战地”

    DICE总经理兼副总裁Rebecka Coutaz近日就《战地2042》首发遭遇的重大挫折发表看法,表示这一经历让团队肩负起一项使命——将即将推出的《战地6》打造成该系列有史以来最杰出的作品。Coutaz在《战地2042》上线后因诸多问题引发玩家强烈不满的时期接掌领导职务,而《战地6》将是她主导下的…

    2026年9月21日
    000
  • UC浏览器网页上的文字无法选中复制怎么办 UC浏览器解决网页文字禁止复制问题

    答案:可通过开发者工具、阅读模式、打印预览、OCR识别或自定义脚本解除UC浏览器网页复制限制。具体操作依次为:开启开发者工具并执行JavaScript代码解除限制;启用阅读模式净化页面内容;使用打印预览重新渲染页面以选中文字;对截图应用OCR技术提取文本;添加书签脚本自动移除禁用选择的代码,从而实现…

    2026年9月21日
    000
  • MySQL数据分库分表如何设计_避免性能瓶颈的方法?

    MySQL数据分库分表如何设计_避免性能瓶颈的方法?MySQL数据分库分表如何设计_避免性能瓶颈的方法?MySQL数据分库分表如何设计_避免性能瓶颈的方法?MySQL数据分库分表如何设计_避免性能瓶颈的方法?

    分库分表设计需注意分片键选择、分片数量控制、避免跨库查询及完善运维体系。一,优先选择高频查询字段作为分片键,如用户id,避免使用时间戳以防写热点;二,初期合理分片(如4~8库,每库4~8表),预留扩容空间并根据数据总量反推分片数;三,尽量避免跨库查询,可通过冗余数据、异步汇总或强制路由优化;四,配套…

    2026年9月21日 用户投稿
    000
  • 抖音蝴蝶号无人直播带货操作流程及注意事项

    抖音蝴蝶号无人直播带货操作流程及注意事项抖音蝴蝶号无人直播带货操作流程及注意事项抖音蝴蝶号无人直播带货操作流程及注意事项抖音蝴蝶号无人直播带货操作流程及注意事项

    “抖音蝴蝶号无人直播带货”是一种通过自动化或半自动化技术实现的直播销售模式。①其核心在于摆脱真人主播限制,实现24小时不间断直播,提升效率与流量利用率;②关键步骤包括明确账号定位与商品选择、准备高质量且丰富的内容素材、利用虚拟人或预录内容实现直播推流、结合智能客服模拟评论区互动;③优势在于降低人力成…

    2026年9月21日 用户投稿
    500
  • VSCode侧边栏怎么去掉_VSCode侧边栏隐藏教程

    隐藏VSCode侧边栏可通过Ctrl + B(Windows/Linux)或Cmd + B(macOS)快捷键快速切换,也可通过菜单栏“视图 > 外观 > 切换侧边栏可见性”或命令面板执行“View: Toggle Sidebar Visibility”实现。推荐使用快捷键操作,效率最高…

    2026年9月21日
    000
  • win10连接打印机错误0x00000709怎么办_win10打印机连接错误修复方法

    错误代码0x00000709通常因权限不足、系统更新冲突或服务异常导致共享打印机连接失败。可使用专业工具一键修复,或通过修改注册表权限、卸载KB5005569等特定更新、重启Print Spooler及相关服务,以及添加Windows凭据(如IP地址和guest账户)解决该问题。 当您在Window…

    2026年9月21日
    100
  • MobileCLIP2— 苹果开源的端侧多模态模型

    MobileCLIP2— 苹果开源的端侧多模态模型MobileCLIP2— 苹果开源的端侧多模态模型MobileCLIP2— 苹果开源的端侧多模态模型MobileCLIP2— 苹果开源的端侧多模态模型

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 可图大模型 可图大模型(Kolors)是快手大模型团队自研打造的文生图AI大模型 32 查看详情 MobileCLIP2是什么 mobileclip2是由苹果研究团队开发的新一代高效多模态模型,…

    2026年9月21日 用户投稿
    100
  • 如何利用蝴蝶号自动直播间打造被动收入系统

    如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统如何利用蝴蝶号自动直播间打造被动收入系统

    要打造蝴蝶号自动直播间实现被动收入,核心在于用预设内容和智能系统替代真人出镜,构建低干预、可持续的流量转化模式。1.内容策略上选择“长寿型”内容,如软件教程、助眠音频、产品演示,并设计循环播放逻辑;2.技术搭建时优化互动设置,嵌入商品链接与自动弹幕,提升直播间活性;3.多渠道引流,结合短视频与社交媒…

    2026年9月21日 用户投稿
    000
  • MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本

    MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本MySQL用户权限体系配置思路_Sublime中编辑多用户分权管理脚本

    最小权限原则是mysql用户权限配置的核心,确保每个用户仅拥有必要权限以提升安全性与可维护性。1.明确需求:根据用户角色分配如只读、增删改查或结构修改权限;2.创建用户并编写sql脚本进行权限管理,替代手动输入命令,提高效率与一致性;3.使用sublime text等编辑器提升脚本编写效率,利用语法…

    2026年9月21日 用户投稿
    000
  • mac怎么在菜单栏显示日期_Mac菜单栏显示日期方法

    首先启用菜单栏时钟显示,进入系统设置→控制中心→日期与时间→开启“在菜单栏中显示”;接着在“桌面与程序坞”→“时钟”中勾选“显示日期”以显示星期和具体日期,可选开启24小时制或秒数;若设置未生效,可通过终端执行killall SystemUIServer命令强制刷新菜单栏。 如果您发现Mac的菜单栏…

    2026年9月21日
    200
  • 音乐文件占用空间太多怎么办_音乐文件占用空间太多如何整理详细指南

    解决音乐文件占空间问题的关键是压缩与整理:先用软件或在线工具降低比特率压缩体积,再按场景分类、利用元数据自动归集,并通过听歌片段和BPM判断保留内容,避免重复与误删。 音乐文件占空间太多,核心解决办法就两条:一是压缩单个文件体积,二是通过有效分类管理提升使用效率。直接删歌不是长久之计,学会整理和优化…

    2026年9月21日
    000
  • Via浏览器在鸿蒙系统上运行会闪退怎么办_Via浏览器鸿蒙系统闪退的解决方法

    Via浏览器闪退可依次尝试清除缓存数据、更新或重装应用、检查系统更新与存储空间、禁用硬件加速功能,必要时通过开发者模式启用USB调试并使用DevEco Studio捕获日志定位问题。 如果您在使用Via浏览器访问网页时,应用突然关闭或无法正常启动,则可能是由于软件兼容性或系统资源问题导致。以下是解决…

    2026年9月21日
    300
  • 升级X86架构性能大提升!极空间Z2 Ultra图赏

    升级X86架构性能大提升!极空间Z2 Ultra图赏升级X86架构性能大提升!极空间Z2 Ultra图赏升级X86架构性能大提升!极空间Z2 Ultra图赏升级X86架构性能大提升!极空间Z2 Ultra图赏

    10月23日,极空间正式推出全新双盘位nas产品——极空间z2 ultra,官方售价为1899元,参与国家补贴后仅需1457元,性价比进一步提升。 此次发布的Z2 Ultra最大的亮点在于采用X86架构处理器,相较以往使用的ARM平台,性能实现飞跃式提升,运行速度显著加快。更重要的是,新架构对Doc…

    2026年9月21日 用户投稿
    200
  • 数据库分库分表(Sharding)策略

    在现代应用程序中,随着数据量的增长,单一数据库的性能和容量往往难以满足需求。这时,数据库分库分表(Sharding)策略就成了一个关键的解决方案。那么,如何设计和实现一个有效的分库分表策略呢?让我们深入探讨一下。 在我的职业生涯中,我曾多次参与大型项目的数据库优化,其中分库分表是常见的挑战之一。我记…

    2026年9月21日
    000

发表回复

登录后才能评论
关注微信