第17课：使用 localStorage 读写键值数据

于 2020-09-22 12:25:03 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Electron 开发入门 文章标签： 全栈 Electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nokiaguy/article/details/108729640
本文介绍了在Electron应用中如何利用localStorage进行前端数据存储，通过一个简单的笔记本应用实例，展示了如何在用户输入时实时保存数据到localStorage，并提到了Electron对SQLite数据库的支持，以及提供了课程答疑群的信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

对于大多数桌面应用来说，都绕不开数据存储，我们可以将数据保存在各种类型的文件或数据库中，如纯文本文件、二进制文件、XML 文件、JSON 文件、关系型数据库、文档数据库等。

由于 Electron 应用本质上是基于 Web 技术的，因而 Electron 应用的存储方案其实就是 Web 的存储方案。在以前，Web 存储方案非常单一，数据都是依赖于后端数据库的存储，如果用户在前端页面输入一些数据，提交后，数据会被保存到服务端的数据库中（如 MySQL、SQL Server 等）。不过随着 HTML 5 的兴起，Web 可以将数据保存到前端，这样 Web 数据存储方案就分为前端和后端。

由于 Electron 同时也可以调用 Node.js API，因而也支持 SQLite 数据库，不过 Electron 中操作 SQLite 数据库有一些特别，这一点在后面的文章中会详细介绍。

本节会介绍一种比较简单的键值存储技术 localStorage，它属于浏览器 API，并不需要使用第三方组件。

localStorage 会使用 key/value 的方式存储数据，本例会使用 localStorage 技术实现一个笔记本的应用。在笔记本中输入的文本会实时存储在 localStorage 中，下面是实现步骤。

（1）实现主页面（index.html）

<html>
    <head>
        <title>笔记本</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src=
了解本专栏 订阅专栏 解锁全文 超级会员免费看
博客
AIGC撕裂劳动力市场：技术狂潮下，人类将走向乌托邦还是深渊？
01-18 2400
随着人工智能（AI）技术的迅猛发展，尤其是生成式AI（AIGC），劳动力市场正经历前所未有的变革。从内容创作到自动化生产线，几乎每个行业都在经历一场技术的洗礼。然而，这场革命并不是全然的光明，它带来了深刻的社会变动，也引发了广泛的担忧和不安。我们不得不面对一个核心问题：AIGC将如何影响未来的工作？会让人类的大多数工作消失，还是会创造出全新的职业机会？
博客
【Python图形图像】《Python OpenCV从菜鸟到高手》——零基础进阶，开启图像处理与计算机视觉的大门！
11-07 2145
《Python OpenCV从菜鸟到高手》是一本深入探讨Python与OpenCV技术的图像处理教程。从Python的基础知识到OpenCV的强大功能，这本书带领读者逐步掌握计算机视觉的核心技术。Python因其简洁和强大的库生态被广泛应用于数据分析、人工智能等领域，而OpenCV则是图像处理与计算机视觉的利器。本书通过循序渐进的方式，让读者从零基础到掌握高级图像处理技能，帮助你实现从初学者到高手的跃升。
博客
【奇妙的Python】解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界
09-04 3040
《奇妙的Python——神奇代码漫游之旅》是一本面向实际应用的Python编程指南，涵盖文件操作、GUI设计、多媒体处理、自动化办公、加密解密等多个领域。由华为HDE专家李宁编写，通过丰富的实战案例，帮助读者在工作和项目中高效应用Python，提升编程技能。无论是新手还是有经验的开发者，这本书都将带你深入探索Python的无限可能，开启一段充满创意与实用性的编程之旅。
博客
【人工智能】AI代理商业革命：订阅制与按需付费的深度博弈
08-05 477
在2025年，AI代理（AI Agents）已成为企业自动化和智能决策的核心工具，推动了从传统SaaS向动态智能系统的转变。本文深入探讨AI代理的两种主流商业模式：订阅制（Subscription Model）和按需付费（Pay-Per-Use Model）。订阅制提供固定费用下的无限访问，适合高频用户，但可能导致资源浪费和收入预测难题；按需付费则根据实际使用收费，更灵活且与价值对齐，却面临收入波动和用户门槛挑战。通过数学模型分析、Python代码模拟（如用户行为蒙特卡洛模拟和成本优化算法），本文比较两者的
博客
【人工智能】革命性变革：AI代理如何重塑医疗诊断与手术规划
08-05 607
在医疗领域，AI代理正从辅助诊断工具演变为全面手术规划系统，标志着医疗技术的重大突破。本文探讨了AI代理的核心概念、技术实现及其在诊断和手术规划中的应用。通过详细的数学模型、算法解释和大量Python代码示例（包含中文注释），我们剖析了从图像识别诊断到路径优化手术规划的全过程。文章首先介绍AI代理的架构，包括强化学习和多代理系统；接着深入诊断助手，如使用卷积神经网络（CNN）进行疾病分类；然后聚焦手术规划，利用遗传算法和A*路径搜索实现精确操作路径。挑战部分讨论了数据隐私、伦理问题和模型鲁棒性。未来展望强调
博客
【人工智能】从零开始构建你的专属AI代理：DIY智能体全面指南
08-04 625
在人工智能时代，AI代理（AI Agent）已成为高效工具，帮助用户自动化任务、决策和互动。本文提供了一个全面的DIY指南，从基础概念入手，逐步教你如何使用Python、LangChain和OpenAI API等工具打造属于自己的AI代理。我们将探讨代理架构、工具集成、状态管理以及强化学习优化，结合大量代码示例和中文注释，帮助初学者和中级开发者快速上手。文章还引入数学公式，如马尔可夫决策过程（MDP）和Q学习算法，以理论支撑实践。通过构建一个简单的任务代理、聊天代理和多代理系统，你将学会如何处理复杂场景，如
博客
【人工智能】 AI代理的双刃剑：个性化服务的隐私隐忧
08-04 657
在数字化时代，AI代理作为智能助手，正悄然融入我们的日常生活，提供高度个性化的服务，如推荐系统、智能聊天机器人和自动化决策工具。这些代理通过收集和分析海量用户数据，实现精准预测和优化体验。然而，这种便利的背后隐藏着严重的隐私风险：数据泄露、滥用和隐形监控可能导致个人信息被不当利用，甚至引发社会伦理问题。本文深入探讨AI代理的技术原理、隐私挑战及其解决方案。首先，我们分析AI代理的架构和数据处理机制；其次，揭示个性化服务中潜在的隐私漏洞，并通过数学模型如信息熵和差分隐私量化风险；然后，提供大量代码示例，包括P
博客
【人工智能】还在为高昂的AI开发成本发愁？这本书教你如何在个人电脑上引爆DeepSeek的澎湃算力！
08-04 743
当AlphaGo战胜李世石时，我们惊叹于AI的计算能力。而今天，以DeepSeek为代表的大语言模型，正以前所未有的创造力，重塑着我们与世界的交互方式——从编写优雅的代码，到创作动人的诗篇；从解答艰深的数学难题，到构建智能的商业应用。
博客
【人工智能】AI代理的伦理迷局：自主智能体的责任归属之谜
08-02 1222
在人工智能时代，AI代理作为自主决策的代表，正深刻改变着人类社会。然而，其伦理困境日益凸显：当AI代理做出自主决策时，谁应为其后果负责？本文从技术角度深入探讨AI代理的定义、决策机制、伦理挑战及解决方案。通过大量代码示例和详细解释，包括强化学习模型、决策树算法及伦理模拟框架，我们分析了责任归属的复杂性。文章强调，AI代理的自主性源于机器学习算法，但伦理责任需由开发者、使用者及监管者共同承担。结合数学模型如效用函数和博弈论，我们揭示了偏见放大、隐私侵犯等风险，并提出伦理集成设计策略。最终，本文呼吁建立全球伦理
博客
【人工智能】AI代理在零售业的崛起：从草莓订购到全流程购物体验
08-02 1040
在零售业快速演变的格局中，AI代理正作为变革力量崛起，连接消费者需求与无缝履行。本文深入探讨AI代理在零售中的兴起，从通过对话界面订购草莓等基本互动，到由高级机器学习和自然语言处理驱动的全面端到端购物体验。我们探讨关键技术，包括推荐系统、库存管理和个性化客户服务，并通过Python代码示例（附带中文注释）进行详细说明。数学公式如协同过滤方程和优化模型以LaTeX形式呈现，以支撑技术深度。通过案例研究和未来展望，我们强调AI代理如何提升效率、增加销售，并应对数据隐私和AI伦理挑战等问题。本文为开发者、零售商和
博客
【人工智能】OpenAI的AI代理革命：通向超拟人交互的未来之路
07-29 980
人工智能代理（AI Agent）正引领一场深刻的技术变革，其核心在于赋予AI系统感知、规划、行动和学习的能力，以自主完成复杂任务。OpenAI作为这一领域的先驱，通过其大型语言模型（LLMs）如GPT系列，极大地推动了AI代理的发展，使其在自然语言理解、生成和工具使用方面达到了前所未有的高度。本文将深入探讨AI代理的架构、OpenAI在其中扮演的关键角色，以及实现与真人无异交互所面临的机遇与挑战。我们将分析记忆管理、规划能力、情感智能、上下文感知等核心要素，并通过丰富的代码示例（包括Python和伪代码）详
博客
【人工智能】AI代理如何重塑2025年的职场：从虚拟助手到决策者
07-29 1086
2025年，人工智能代理（AI Agent）已从简单的虚拟助手演变为职场中的核心决策者，深刻重塑了工作方式与企业格局。本文深入探讨AI代理的技术架构、应用场景及对职场的影响，涵盖其从任务自动化到复杂决策支持的进化路径。文章通过详尽的代码示例（如Python实现的智能任务分配器和基于React的AI助手界面），结合数学模型（如强化学习和优化算法），展示了AI代理如何提升效率、优化资源并推动人机协作。预计到2030年，AI代理将影响70%的白领工作，带来44万亿美元的生产力增长潜力。本文旨在为技术从业者提供实践
博客
【运维】Python与Prometheus联手：打造云服务实时监控与报警的智能利器
07-28 876
随着云服务的广泛应用，实时监控和及时报警成为保障系统稳定性的关键。本文深入探讨如何利用Python结合Prometheus构建一个高效的云服务监控工具，实现资源使用情况的实时监测与异常报警。文章从Prometheus的基本原理入手，详细介绍了其核心组件（如时间序列数据库和PromQL），并通过Python脚本展示如何采集自定义指标、集成Prometheus客户端以及设计报警逻辑。文中提供了大量带中文注释的代码示例，涵盖指标采集、数据可视化、告警规则配置和通知推送等功能。此外，还探讨了数学模型在异常检测中的应
博客
【人工智能】微调新玩法：让大模型成为你的创意引擎
07-28 1030
大模型的崛起为人工智能注入了无限可能，而微调技术则是将其转化为个性化创意引擎的关键。本文深入探讨大模型微调的最新技术，包括LoRA、QLoRA、提示工程、参数高效微调（PEFT）等方法，结合数学公式和PyTorch代码示例，详细解析如何在有限资源下优化模型性能。文章涵盖数据准备、微调策略、分布式微调、评估方法以及实际案例，通过大量注释代码和实践指导，帮助开发者将通用大模型转化为特定任务的创意利器。无论是NLP任务还是多模态应用，本文都为研究者和开发者提供了全面的技术蓝图。
博客
【人工智能】 人工智能的炼丹炉：大模型训练的技术革命
07-04 361
人工智能的飞速发展得益于大模型训练技术的突破，这些技术如同现代“炼丹炉”，将海量数据、复杂算法与强大算力融合，炼制出具备卓越能力的模型。本文深入剖析大模型训练的核心技术，包括数据预处理、Transformer架构优化、分布式训练、混合精度训练及超参数调优。通过大量Python代码示例、详细注释和数学公式，揭示如何利用PyTorch、DeepSpeed等框架实现高效训练。本文还探讨训练中的挑战与解决方案，为研究者和开发者提供全面的技术参考。
博客
【人工智能】星辰大海的征途：大模型从理论到应用的实践冒险
07-04 732
大模型（Large Language Models, LLMs）作为人工智能领域的璀璨星辰，正在深刻改变技术生态。从自然语言处理到多模态应用，大模型展现出强大的泛化能力和创造力。本文深入探讨大模型的核心概念、技术架构、训练方法及应用落地的关键挑战。通过结合数学原理、算法实现和实际案例，文章从理论到实践，剖析大模型的构建与优化过程，并提供大量带中文注释的代码示例，帮助读者理解从模型设计到部署的全流程。文章还探讨了大模型在企业级应用中的优化策略、成本控制和伦理考量，为开发者提供一幅从星辰到大海的技术蓝图。
博客
【人工智能】DeepSeek的AI实验室：解锁大语言模型的未来
07-03 1145
DeepSeek作为中国AI领域的先锋，以其开源大语言模型（LLM）DeepSeek-V3和DeepSeek-R1在全球AI研究中掀起波澜。本文深入探讨DeepSeek AI实验室在模型架构、训练策略、硬件优化及开源生态方面的创新，揭示其如何以低成本实现媲美顶级闭源模型的性能。文章结合代码示例和数学公式，详细分析DeepSeek的混合专家模型（MoE）、多头潜在注意力（MLA）、多标记预测（MTP）等技术，辅以强化学习（RL）和监督微调（SFT）的实现细节。通过对DeepSeek-V3和R1的性能评估与实际
博客
【人工智能】 AI的进化之路：大模型如何重塑技术格局
07-03 924
本文深入探讨了人工智能大模型的进化历程及其对技术格局的深远影响。从早期神经网络到现代大模型的突破，文章分析了关键技术进步，如Transformer架构、预训练机制和分布式计算。结合数学公式和代码示例，详细阐述了大模型的训练原理、优化方法及实际应用场景。文章还展示了如何使用Python和PyTorch实现简单的大模型组件，并展望了AI未来的发展方向。本文旨在为技术爱好者和开发者提供全面的参考，揭示大模型如何改变游戏规则。
博客
【运维】Python与Ansible协同作战：打造自动化服务器配置管理的终极解决方案
06-06 1243
在现代IT运维中，服务器配置管理是一项繁琐但至关重要的任务。手动配置多台服务器不仅耗时，还容易出错。本文深入探讨如何利用Python结合Ansible工具实现自动化服务器配置管理与环境部署。通过Python脚本调用Ansible API，我们可以动态生成配置任务，批量管理服务器的软件安装、文件分发和服务启动等操作。文章详细介绍了Ansible的基本原理、Python的脚本设计思路，并提供了大量示例代码，包括如何处理服务器清单、编写playbook以及异常处理等。所有代码均附带详细的中文注释，帮助读者理解每一
博客
【人工智能】微调的秘密武器：释放大模型的无限潜能
06-06 927
在人工智能迅猛发展的今天，大规模语言模型（LLMs）以其强大的通用能力席卷各行各业。然而，如何让这些通用模型在特定领域或任务中发挥最大潜力？答案是微调（Fine-tuning）。本文深入探讨微调的理论基础、技术细节与实践方法，揭示其作为解锁大模型隐藏潜力的秘密武器的核心机制。通过详细的代码示例（基于Python和PyTorch）、数学推导以及中文注释，我们将展示如何通过参数高效微调（PEFT）、LoRA和量化技术优化模型性能。文章不仅适合AI从业者，也为对大模型优化感兴趣的读者提供全面指导，目标是让微调技术
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值