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

想要送朋友一个礼物，但是想了想，街上买的东西，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. 2020最精细的Java学习路线图

    在吾爱破解发布的Java学习路线图自我感觉良好,之后看到动力节点Java学院的这份学习路线图感觉专业的东西还得专业的人来做,这份专业的学路线图把我上次的Java学习路线图秒成渣,虽然内容差不多,上份是 ...

  2. idea控制台中文乱码解决办法

    也可以通过idea右下角的设置,但是properties文件是不能设置的,这个只能在file->setting->file encodings 设置

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

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

  4. vue 引入 tcplayer，并且实现视频点播，腾讯点播

    这篇文章仅用于上传到 腾讯的视频点播,上传到腾讯视频请看上一篇文章,话不多说,直接上代码 <template> <div> <video :id="tcPlay ...

  5. thymeleaf+layui加载页面渲染时报错

    将freemaker替换成thymeleaf时出现以下问题: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse ...

  6. Linux复习笔记-001-进程的管理

    1.什么是进程? 进程是已经启动的可执行的程序运行实例. 程序是二进制文件,静态 ./bin/date/ /usr/sbin/ 进程:是程序运行的过程 2.Linux为1的进程? centos5或6为 ...

  7. elementUI+nodeJS环境搭建

    一. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...

  8. Linux - 安装 ant

    官方下载地址 https://ant.apache.org/bindownload.cgi 旧版下载地址 https://archive.apache.org/dist/ant/binaries/ 挑 ...

  9. 通过HttpURLConnection下载图片到本地--批量下载

    一.背景说明 这篇文章讲述的是批量下载附件,在上一篇文章中,介绍了下载单个附件(上一篇文章). 二.实现思路 主要的实现思路:创建文件夹->文件夹中创建需要下载的文件->压缩文件夹-> ...

  10. AtCoder Regular Contest 069 D - Menagerie 枚举起点 模拟递推

    arc069.contest.atcoder.jp/tasks/arc069_b 题意:一堆不明身份的动物排成一圈,身份可能是羊或狼,羊一定说实话,狼一定说假话.大家各自报自己的两边是同类还是不同类, ...