纯前端H5小应用_localStorage存储
2024-09-03 01:42:29
开发缘由【需求发现和分析】
想要送朋友一个礼物,但是想了想,街上买的东西,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>
- 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的时候数据会清除,但是页面查一次刷新,所以清除后还会看到输入框里的条目,后面通过在清除事件里添加了一次重新加载,解决了这个问题,所以现在的清除可以及时消失。
最新文章
- 如何写出安全的API接口?接口参数加密签名设计思路
- yii小细节
- easyui-combobox实现省-市-区县级联菜单
- .NET对象判等归纳与总结
- MVC的过滤器
- MySQL的简单查询
- Android测试环境搭建(win7)
- Linux:chmod -R 777 * 是什么意思?
- 可以把一些常用的方法,写入js文件,引入html界面
- 开源Math.NET基础数学类库使用(02)矩阵向量计算
- python 实现excel转化成json文件
- Android学习笔记- ProgressBar(进度条)
- Android OpenGL ES(八)----纹理编程框架
- 三、自动化测试平台搭建-django-如何用mysql数据库做web项目
- 解决ubuntu下音乐播放器Rhythmbox乱码问题
- Learning-Python【27】:异常处理
- [总结]多项式类数学相关(定理&;证明&;板子)
- Mongo分片集群脚本
- 1.HTML编码解码URL替换--代码整理
- ios虚拟机安装(四)
热门文章
- new Vue({ render: h =>; h(App), }).$mount(&#39;#app&#39;)
- Servlet学习笔记(四)之请求转发与重定向(RequestDispatcher与sendRedirect)
- Python之sqlite3模块
- Mybatis-Plus常用的查询方法--看这一篇就够了!!!
- CSS导航菜单(二级菜单)
- io流-文件流\节点流
- 1004. 最大连续1的个数 III
- UVA 11853 Paintball(几何数学+DFS)
- 2. Go并发编程--GMP调度
- TP5多条件搜索,同时有必要条件