js单词存储

于 2021-07-14 14:10:15 发布
阅读量128 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45754920/article/details/118726225
版权
这个博客展示了如何使用HTML5的localStorage进行数据存储。用户可以输入单词及其解释，点击保存按钮将数据存储在本地。此外，还实现了查询功能，点击链接可以跳转到单词查看页面。博客强调了localStorage在前端应用中的实用性和基本用法。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: content-box;

        }

        a {

            text-decoration: none;

            display: inline-block;

            width: 80px;

            height: 40px;

            background-color: antiquewhite;

            text-align: center;

            line-height: 40px;

            box-shadow: antiquewhite;

        }

        .change {

            margin: 20px auto;

            text-align: center;

        }

        .form {

            text-align: center;

            height: 300px;

            margin: 100px auto;

        }

        .form input {

            height: 40px;

            margin: 0 20px;

            padding: 10px;

            font-size: 20px;

            border-radius: 5px;

            border-color: skyblue;

        }

        #word {

            width: 150px;

        }

        #description {

            width: 300px;

        }

        #save {

            width: 80px;

        }

    </style>

</head>

<body>

    <div class="change">

        <a href="#">查询单词</a>

    </div>

    <div class="form">

        单词：<input type="text" name="word" id="word" placeholder="请输入单词">

        解释：<input type="text" name="description" id="description" placeholder="请输入单词解释">

        <input type="button" value="保存" id="save">

    </div>

    <script>

        // 自执行函数：为了让代码独立（命名不冲突，变量是局部是安全）

        // 沙箱：提供一种隔离机制运行代码，代码不会被外部影响，同时也不影响外部代码

        (function () {

            let save = document.querySelector('#save');

            let word = document.querySelector('#word');

            let desc = document.querySelector('#description');

            save.addEventListener('click', () => {

           let =  words = word.value.trim();

            let =   descs = desc.value.trim();

                if (words.length == 0) return

               if (descs.length == 0) return

                // 从本地存储中取出数据：有就是字符串，没有就是null

                let storage = localStorage.getItem('words');

                console.log(storage)        //null

                // 如果为空null：说明当前是第一次存储数据

                if (storage == null) storage = {};  // 空对象

                else storage = JSON.parse(storage); // 有：将原来的对象取出来

                /* 如果想要允许单词覆盖：将下面这几行代码注释 */

                if (storage[words]) {

                    // 对象中有words对应的属性

                    alert(words + '已经存在');

                    return;

                }

                // words是收入的单词，descs是解释

                // storage增加一个属性：名字叫做words代表的单词，值就是解释

                storage[words] = descs;

                // 将当前新存储的内容，去覆盖原来的内容（转成json格式字符串）

                localStorage.setItem('words', JSON.stringify(storage));

                word.value = '';

                desc.value = '';

            });

            document.querySelector('.change').addEventListener('click', () => {

                location.assign('单词查看.html');

            });

        })();

    </script>

</body>

</html>

刘薄膜
关注
JavaScript实现单词计数(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-25 149
JavaScript实现单词计数(附完整源码)
单词压缩存储
zhj12399的博客
10-22 353
单词压缩存储题目信息解答 题目信息 如果采用单链表保存单词，可采用如下办法压缩存储空间。如果两个单词的后缀相同，则可以用同一个存储空间保存相同的后缀。例如，原来分别采用单链表保存的单词Str1“loading”和单词Str2“being”，经过压缩后的存储形式如下。 请设计一个高效的算法完成两个单链表的压缩存储。 要求：阅读预设代码，编写函数SNODE * ziplist( SNODE * head1, SNODE * head2 )ziplist的功能是：在两个串链表中，查找公共后缀，若有公共后缀，则压
三、单词压缩存储
qq_42582489的博客
07-15 519
三、单词压缩存储 文章目录三、单词压缩存储题目描述解题思路上机代码 题目描述 如果采用单链表保存单词，可采用如下办法压缩存储空间。如果两个单词的后缀相同，则可以用同一个存储空间保存相同的后缀。例如，原来分别采用单链表保存的单词Str1“loading”和单词Str2“being”，经过压缩后的存储形式如下。 请设计一个高效的算法完成两个单链表的压缩存储。 要求：阅读预设代码，编写函数SNODE * ziplist( SNODE * head1, SNODE * head2 ) ziplist的功能是：在两
用js简单实现单词默写系统
weixin_43748930的博客
01-03 825
单词默写系统作业 &lt;h2&gt;单词默写系统&lt;/h2&gt; &lt;div id="app"&gt; &lt;/div&gt; &lt;script&gt; // 定义一个数组 var dataSource = [ { ch: "对象",
JavaScript实现英语单词题库
10-15
主要为大家详细介绍了JavaScript实现英语单词题库，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现自动阅读单词(有道单词本添加功能)
12-23
有道单词客户Duan没有自动阅读的功能, 本文用强大的js实现了简单的自动下一个单词的功能,需要的朋友可以参考下
js常用单词以及数组方法
Dodddhdhdg的博客
09-23 772
push :添加一个数组元素 pop ：删除最后一个数组元素 shift ：删除第一个数组元素 console ：控制台 string ：字符串 document ：文档 Concat 组合数组 typeof ：关键字 join：数组转化为指定分隔符 slice：返回指定数组 length：数组长度 Array：数组 JS中的值类型:{ number：数字 boolean：布尔 object：对象类型 undefined ：未定义 String：字符串 null：空 Symbol：表示独一无二的值。它是 J
Jumble:动画 Javascript 单词混乱
06-01
"Jumble:动画Javascript单词混乱"是一个基于Node.js和Express框架的在线游戏项目，旨在通过JavaScript实现动态的单词混乱游戏。在这个游戏中，玩家需要解决由打乱顺序的字母组成的单词谜题。这个项目的核心功能主要...
JS查找英文文章中出现频率最高的单词
12-09
在JavaScript编程语言中，查找英文文章中出现频率最高的单词是一项常见的任务，这通常涉及到字符串处理、正则表达式以及数组操作。在这个特定的场景中，给出的`counts`函数就是一个解决此类问题的例子。以下是该函数...
js猜单词游戏代码
07-24
源码可能包含多个JavaScript文件，例如`game.js`用于游戏逻辑，`ui.js`处理用户界面交互，`wordlist.js`存储单词数据等。HTML文件则负责构建游戏的网页布局，CSS用于样式设计。 总的来说，js猜单词游戏代码是一个...
js单词、方法的使用
nt1246902196的博客
07-08 244
prompt:弹出一个输入框，输入的值就赋给前面那个变量。 .toFixed():保留几位小数“会把数字转成字符串” Number：把字符类型改成数字类型 某某.toString():把其他类型转成字符串 可以转换进制，把10进制转换为别的进制 ECMScript可用3种强制转换 Boolean(value)把给定的值转换成Boolen型 Number(value)把给定的值转换成Number（可以是整数或浮点数...
JavaScript制作简易单词测试题库
weixin_44593658的博客
12-23 1272
使用sessionStorage和localStorage制作一个英语单词题库 由于一共有三个页面 所以html代码和css代码只展示部分作参考 <div class="main"> <h1>单词录入</h2> <hr><br> <span>English:</span><input type=...
javascript之单击获得单词
千霜的博客
07-22 2397
有时我们有这样的一个需求，对于一篇英语文章，我们想要单击来获取单词，而不是双击获取单词。经过了谷歌一番，我也大致找到了办法。废话不多说，直接上代码：   &lt;html&gt; &lt;body&gt; &lt;p&gt;hello how are you ?&lt;/p&gt;   &lt;script src="js/jquery.min.js"&gt;&lt;/script&amp
【6层】一字型框架办公楼（含建筑结构图、计算书）.zip
09-21
【6层】一字型框架办公楼（含建筑结构图、计算书） 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
Kotlin编程全攻略：从基础到实战项目的系统学习资料
09-21
Kotlin作为一种现代、简洁的编程语言，正逐渐成为Android开发的新宠。本文将为您介绍一套全面的Kotlin学习资料，包括学习大纲、PDF文档、源代码以及配套视频教程，帮助您从Kotlin的基础语法到实战项目开发，系统地提升您的编程技能。
机械原理课程设计_牛头刨床说明书.doc
最新发布
09-21
机械原理课程设计_牛头刨床说明书.doc
搭建网页版单词记忆系统
该系统的核心功能是通过XML文件来存储单词本，用户可以通过选择不同的单元来学习和默写单词。在原基础上，开发者进行了一系列改进，以提升用户体验和学习效果。 1. 删除了cookie功能：原有的系统可能允许用户通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值