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

想要送朋友一个礼物，但是想了想，街上买的东西，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. 恶意软件开发——shellcode执行的几种常见方式

    一.什么是shellcode? shellcode是一小段代码,用于利用软件漏洞作为有效载荷.它之所以被称为"shellcode",是因为它通常启动一个命令shell,攻击者可以从 ...

  2. ffplay 播放网络摄像头视频

    shell脚本如下,无须加port ffplay rtsp://cameral_ip

  3. SpringBoot笔记（2）

    一.容器功能 1.1 组件添加 1. @Configuration Full模式:获取对象时,首先在容器内搜索是否存在,如存在直接拿出 默认为Full模式,单例 配置类组件之间有依赖关系,方法会被调用 ...

  4. 使用selenium模拟登录12306网站

    1 import yh 2 from selenium import webdriver 3 from PIL import Image 4 # from selenium.webdriver imp ...

  5. maven下载出错

    求解

  6. vue ele 日期时间格式限制不能早于当天，时间转换成时间戳 进行比较

    <el-date-picker             value-format="yyyy-MM-dd HH:mm:ss"             v-model=&quo ...

  7. MyBatis的多表查询笔记

    MyBatis的多表查询 随着学习的进步,需求的提高,我们在实际开发中用的最多的还是多表查询,就让我们一起学习MyBatis中的多表查询. 数据库准备 Class表 Student表 项目结构 这次使 ...

  8. MySQL查询结果集字符串操作之多行合并与单行分割

    前言 我们在做项目写sql语句的时候,是否会遇到这样的场景,就是需要把查询出来的多列,按照字符串分割合并成一列显示,或者把存在数据库里面用逗号分隔的一列,查询分成多列呢,常见场景有,文章标签,需要吧查 ...

  9. pip安装更换国内源

    镜像地址:阿里云 https://mirrors.aliyun.com/pypi/simple/豆瓣http://pypi.douban.com/simple/清华大学 https://pypi.tu ...

  10. Hello Wolrd

    这是一篇测试文章.....后续会更新一些文章.