开发缘由【需求发现和分析】

想要送朋友一个礼物，但是想了想，街上买的东西，em~，我们这样的猿确实不会选礼物啊，由此就想利用自己手中的工具和知识做点有用的东西吧，抱枕是礼物，钢笔是礼物，电子产品也是礼物啊~哈哈，由此，就为朋友定制设计一个便笺，尽量符合她的使用日常记录需求吧，虽然现在app stroe 里一搜一大把，一个比一个好，但是自己做一个符合个人特色的，应该会有不一样的感觉，哈哈！所以有的玩l了。

需求1 能添加文字记录
需求2 能删除文字记录
需求3 能修改文字记录
需求4 可以一键对完成事件划删除线
需求5 显示最后一次修改并保存的时间
需求6 个人特色（em~这个~）

准备着手【可行性研究】

  1. 【经济可行性】em~软件真是好啊，不需要花钱去买啥材料，有了电脑和软件，加上知识，经济方面，通过了！
  2. 【技术可行性】哇~，考虑到本身技术和对方的平台，自身技术方面，前端没问题，后台也没问题，但是如果用后台，在没有网络，在对方不能安装数据库和运行环境的情况下，我打算采用纯前端实现这个便笺，一方面很容易打包安装到手机里面应用，另一方面直接在电脑的浏览器就可以应用！所有这个问题，用纯前端知识来处理，可以的！

动手前先设计分析很有必要的【总体设计】

不过这个小东西确实很小很容易维护和设计，那这个就在脑海里分析了，哈哈，大项目可不能这样，不然会死得很惨！

开始动手【编码】

  • 页面编码：
 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <meta charset="utf-8">

 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

 7     <script src="../js/jquery-3.3.1.js"></script>

 8     <script src="../js/notes.js"></script>

 9     <link rel="stylesheet" type="text/css" href="../css/bcss/bootstrap.css" />

10     <link rel="stylesheet" type="text/css" href="../css/fortest2.css" />

11     <title>便签</title>

12 </head>

13 <body>

14     <div class="container">

15         <div class="myfomat">

16             <textarea class="form-control mytextarer" name="filereader" placeholder="美好生活从有序开始~" style="width: 100%; height: 180px;"></textarea>

17                <br />

18                <div style="margin-left: 2%;width: 50%;float: left;height: 35px;">

19                    <button class="btn btn-sm btn-info" type="button" name="storebutton">save</button>

20                 <button class="btn btn-sm btn-danger" type="button" name="clearbutton">clear</button>

21                </div>

22                <div style="width: 35%;height: 30px;float: left;margin-right: 5%;">

23                 <h4>有序便签</h4>

24             </div>

25               <br />

26         </div>

27     </div>

28 </body>

29 </html>
  • css文件编码（待）
  • js文件编码
 1     window.onload = function(){

 2         var text = document.getElementsByName('filereader')[0],

 3         storeButton = document.getElementsByName('storebutton')[0],

 4         clearButton = document.getElementsByName('clearbutton')[0];

 5

 6        // 检测localStorage中是否已有缓存

 7         if(window.localStorage.getItem('textareaStorage')) {

 8 //              alert('检测到本地存储的文件，已为您自动恢复');

 9             text.value = window.localStorage.getItem('textareaStorage');

10         }

11

12 //              存储文件

13         storeButton.onclick = function(){

14             window.localStorage.setItem('textareaStorage', text.value);

15             alert('保存成功');

16         };

17

18          // 清除存储

19         clearButton.onclick = function(){

20             window.localStorage.removeItem('textareaStorage');

21             document.getElementsByName('filereader').value = "";

22             alert('清除成功');

23             window.location.reload();

24         };

25     };
  • 当前效果

当sava的时候会存储，当下次打开网页的时候数据会自动恢复，当clear的时候数据会清除，但是页面查一次刷新，所以清除后还会看到输入框里的条目，后面通过在清除事件里添加了一次重新加载，解决了这个问题，所以现在的清除可以及时消失。

纯前端H5小应用_localStorage存储的更多相关文章

  1. Taro/JS/H5/小程序：纯前端解决小程序微信支付统一下单和调起支付

    这个文章不会说具体0到1的代码流程,我会着重讲几个问题的解决 准备以下依赖 "md5": "^2.2.1", "xml-js": " ...

  2. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  3. C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

    在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基 ...

  4. 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场

    提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...

  5. Egret白鹭H5小游戏开发入门（一）

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  6. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  7. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

  8. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  9. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

随机推荐

  1. VSCode添加某个插件后，Python 运行时出现Segmentation fault (core dumped) 解决办法

    在VSCode添加某个插件后,Debug出现Segmentation fault (core dumped) 解决方案,在当前environment下运行: conda update --all

  2. Springboot 日志、配置文件、接口数据如何脱敏？老鸟们都是这样玩的！

    一.前言 核心隐私数据无论对于企业还是用户来说尤其重要,因此要想办法杜绝各种隐私数据的泄漏.下面陈某带大家从以下三个方面讲解一下隐私数据如何脱敏,也是日常开发中需要注意的: 配置文件数据脱敏 接口返回 ...

  3. 两种github action 打包.Net Core 项目docker镜像推送到阿里云镜像仓库

    两种github action 打包.Net Core 项目docker镜像推送到阿里云镜像仓库 1.GitHub Actions 是什么? 大家知道,持续集成由很多操作组成,比如抓取代码.运行测试. ...

  4. 过WAF的小思路

    过WAF的小思路 前言 最近在学习了一波CMS漏洞,尝试看了几个菠菜站,有宝塔WAF...向WHOAMI大佬取经回来后,绕过了一个WAF.觉得是时候要认真总结一下了:) 前期的过程 菠菜采用的是Thi ...

  5. idea字节码插件JClassLib——阅读JVM字节码

    idea字节码插件JClassLib--阅读JVM字节码 生成字节码文件并查看 查看字节码文件的方式:javac 文件名.java 即可生成.class文件,但是这种方式不方便 java:是运行字节码 ...

  6. Systemd Journald占用资源过多

    journald占用过多磁盘空间 方法一 检查当前journal使用磁盘量 journalctl --disk-usage 清理方法可以采用按照日期清理,或者按照允许保留的容量清理,只保存2天的日志, ...

  7. css文本溢出省略号大总结，如你所愿

    一行: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 两行: width ...

  8. Linux原始套接字抓取底层报文

    1.原始套接字使用场景 我们平常所用到的网络编程都是在应用层收发数据,每个程序只能收到发给自己的数据,即每个程序只能收到来自该程序绑定的端口的数据.收到的数据往往只包括应用层数据,原有的头部信息在传递 ...

  9. uniapp获取用户OpenId及用户详情

    页面增加一个按钮 <button type="default" open-type="getUserInfo" @click="getUserI ...

  10. Python - poetry（4）管理环境

    环境隔离 poetry 核心之一:使项目环境隔离,意味着始终和本地全局 Python 环境隔离 poetry 首先会检查当前项目是否在虚拟环境中运行:如果是将直接使用它,而不创建新的:如果不是,poe ...