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

对于大多数桌面应用来说,都绕不开数据存储,我们可以将数据保存在各种类型的文件或数据库中,如纯文本文件、二进制文件、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 
蒙娜丽宁 CSDN认证博客专家 公众号:极客起源 达芬奇 UM
更多精彩内容请关注微信公众号:「极客起源」,东北大学计算机专业硕士。UnityMarvel创始人,企业内训讲师、IT畅销书作者,CSDN学院讲师,拥有多年软件开发经验和培训经验。主要著作包括《Python从菜鸟到高手》、《Python爬虫技术:深入理解原理、技术与开发》,培训企业学员数千人。制作在线课程数千小时。更多视频课程,请访问我的B站:https://space.bilibili.com/477001733
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值