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

想要送朋友一个礼物，但是想了想，街上买的东西，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. Leaflet 操作OSM(OpenStreetMap) 设置地图style

    Leaflet是一个开源的地图操作库,其中mapbox是其一个插件,这个插件可以自定义想要的地图格式.https://www.mapbox.com/mapbox-gl-js/api/这是其官网地址. ...

  2. uniapp 封装 request 并 配置跨域，（ 本地 + 线上 + 封装 ）

    找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. &qu ...

  3. 提交Spark作业遇到的NoSuchMethodError问题总结

    测试应用说明 测试的Spark应用实现了同步hive表到kafka的功能.具体处理流程: 从 ETCD 获取 SQL 语句和 Kafka 配置信息 使用 SparkSQL 读取 Hive 数据表 把 ...

  4. 安装和配置CloudWatchAgent

    文章原文 使用 CloudWatch 代理收集指标和日志 下载 CloudWatch 代理软件包 sudo yum install amazon-cloudwatch-agent 点击查看其他平台软件 ...

  5. 初学AOP小结

    Spring AOP理解 参考链接 AOP简介 AOP(面向切面编程),可以说时OOP的补充,使用OOP时,我们在日常编写代码的时候,一旦牵涉到大型一点的项目,项目不可或缺的事务处理,安全处理,验证处 ...

  6. MacOS开启PPTP协议

    ​ 开启PPTP协议: Mac OS X 系统默认开启了完整性保护(System Intregrity Protection,SIP),所以即使是root帐户也无法修改系统目录中的文件.如果需要修改受 ...

  7. JS011. 身份证号码校验（仅34行）

    身份证格式 六位数字地址码 + 八位数字出生日期码 + 三位数字顺序码 + 一位数字校验码 checkIdCard.js checkIdCard: function (idCard){ //15位和1 ...

  8. JDBC使用案例

    一.结果集中获取数据并对实体set值,封装成对象返回: 2.封装JDBC工具类 只要执行一次的,如读取配置文件,则写静态代码块: 异常抛出要写明方法才可以throw,静态代码块异常只能捕捉try ca ...

  9. 抽奖之Flash大转盘

    1.搭建JS与Flash互通的环境 function thisMovie(movieName){ if (window.document[movieName]) { return window.doc ...

  10. deecms栏目页调用自定义字段方法

    {dede:arclist addfields='suoxu_jifen,shichang_jiage' typeid='13' row='15' channelid='3'} <li>& ...