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

想要送朋友一个礼物，但是想了想，街上买的东西，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. springboot系列总结(一)---初识springboot

    Spring Boot是一个简化Spring开发的框架.用来监护spring应用开发,约定大于配置,去繁就简,just run 就能创建一个独立的,产品级的应用. 一说springboot ,Java ...

  2. （三）羽夏看C语言——进制

    写在前面   由于此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇 ...

  3. NOI2021 游记

    day -10 开始一天一场NoIP模拟赛,前几场每天挂分很厉害(这么说是因为后面的以前做过) 自省选惨挂以后国赛的知识点就几乎没怎么摸过了,考前发现连manacher都不会写了,反演?又陷入&quo ...

  4. [考试总结]noip模拟44

    这个真的是一个 \(nb\) 题. 考试快要结束的时候,在机房中只能听到此起彼伏的撕吼. 啊---------- 然后人们预测这自己的得分. \(\color{red}{\huge{0}}\) \(\ ...

  5. CSS导航菜单（一级菜单）

    index.html <div class="nav"> <ul> <li><a href="#">Java&l ...

  6. Spring Cloud Gateway 学习+实践

    官网上给出的Spring Cloud Gateway特性如下图所示: 翻译过来就是: 基于 Spring Framework 5 ,Project Reactor 以及 Spring Boot 2.0 ...

  7. 作业帮-PHP技术一面整理

    项目经验介绍 RPC 调用的协议 用amf 和 base64编码 我想问的是通信协议:调用rpc接口时的过程是什么样?比如业务调用PHP接口的时候,用的是什么协议? (没理解)(https://www ...

  8. Docker 容器间的单向连接

    Docker 容器间的单向连接 前言 a. 本文主要为 Docker的视频教程 笔记. b. 环境为 CentOS 7.0 云服务器 c. 上一篇:Dockerfile 自动制作 Docker 镜像( ...

  9. java.net.NoRouteToHostException: 无法指定被请求的地址

    今天压力测试时, 刚开始出现了很多异常, 都是 java.net.NoRouteToHostException: Cannot assign requested address.  经网上查资料, 是 ...

  10. js特效代码-onmouseover/onclick 改变标签(背景)颜色

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...