纯前端H5小应用_localStorage存储

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

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

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

准备着手【可行性研究】

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

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

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

开始动手【编码】

页面编码：

 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>

View Code

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     };

View Code

当前效果

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

转载于:https://www.cnblogs.com/ynhwl/p/9527159.html

纯前端H5小应用_localStorage存储相关推荐

微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
微信小程序获取用户信息（纯前端）
特别说明 2022年10月25日起,小程序 wx.getUserProfile 接口将被收回. 微信官方不希望开发者直接拿用户的昵称和头像,若小程序需要设置昵称和头像,可以单独开发一个设置页,由用户手 ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
html贝塞尔曲线在线,【HTML+js+纯前端】三次方贝塞尔曲线手工拟合小工具
本帖最后由南郊居士于 2020-2-18 23:38 编辑 2020.2.18 重要修正: 1. 修正了当图样长宽不同时不能正确显示各控制点的问题. (一整天了都没人吐槽这个问题,看来这个工具还真 ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
小程序canvans一键截屏纯前端实现
小程序canvas一键截屏,生成图片并保存,提供源码核心代码如下,大家可以参考一下 downImg(list) {var that = thislet imglist = []let n = 0fu ...
仿qq邮箱源码程序_QQ微信头像制图工具箱小程序纯前端源码
今天在网上看到了一个微信小程序源码,经测试QQ小程序也可以完美运行,所以给大家分享一下这个QQ微信头像制图工具箱小程序纯前端源码. 主要功能有文字九格.头像挂件生成.爆趣九宫格.形状九宫格.创意长图. ...
＜纯前端实现「羊了个羊」小游戏＞
纯前端实现「羊了个羊」小游戏
uniapp vue 微信小程序前端直传华为云对象存储OBS
前言: 因项目服务器性能需要需要前端直传华为云对象存储绕过后端个人在华为云官网SDK文档研究分享出来避免大家踩坑报错定位 web端报 Error: Network Error 高频问 ...