java便签小程序原码_localStorage实现便签小程序
前言:今天写了个小练习,把这几天看的东西巩固一下,在这个程序中用到了localStorage存储和json串的转换。
下面是具体的实现代码:
(1)首先判断是否存在用户,从而显示相应的界面
function isUser()
{
var storage = window.localStorage;
if (storage.user != undefined)
{
document.getElementById("showmess").style.display = "block";
document.getElementById("fillmess").style.display = "none";
}
else
{
document.getElementById("showmess").style.display = "none";
document.getElementById("fillmess").style.display = "block";
}
}
(2)存储用户信息
var pic; //全局变量存储图片信息
/*从本地电脑获得图片*/
function add_files(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("userpic").src = e.target.result;
pic = e.target.result;
}
reader.readAsDataURL(file);
}
}
function saveUserMess()
{
var name = document.getElementById("username").value;
if (name != "")
{
var storage = window.localStorage;
var jsonObj = {
name:name,
icon:pic
};
var user = JSON.stringify(jsonObj);
storage.setItem("user",user);
}
else
{
alert("昵称不为空");
}
}
(3)用户输入便签内容,并保存
function save_diary()
{
var headle = document.getElementById("headle").value;
var cont = document.getElementById("diary").value;
if (headle != "" && cont != "")
{
var storage = window.localStorage;
if (storage.diary != undefined)
{
var diary = storage.getItem("diary");
var jsonObj = JSON.parse(diary);
var diaryItem = {
headle:headle,
diary:cont,
date:new Date()
};
jsonObj.push(diaryItem);
var data = JSON.stringify(jsonObj);
storage.setItem("diary",data);
}
else
{
var jsonObj = [{
headle:headle,
diary:cont,
date:new Date()
}];
var diary = JSON.stringify(jsonObj);
storage.setItem("diary",diary);
}
}
else
{
alert("标题和内容不为空哦");
}
}
(4)将用户便签信息显示在见面
function showDiary()
{
var storage = window.localStorage;
var mess = JSON.parse(storage.user);
if (storage.diary != undefined)
{
var json = JSON.parse(storage.diary);
var div_id = document.getElementById("diarymess");
for (var i = 0; i < json.length; i++)
{
div_id.innerHTML+='
'+json[i].headle+'
'+json[i].date+'
'+'
'+json[i].diary+'
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
java便签小程序原码_localStorage实现便签小程序相关推荐
- 小程序源码整理最新的学习小程序的源码清单包含前后台
微信小程序疯狂猜成语小程序源码UI美观 知识答题类小程序源码 200多套微信小程序源码带后台+教程+源码 校园小情书小程序前端+后端源码 微信版flappybird小游戏源码下载,经典像素鸟小游戏源码 ...
- 仿京细菜谱微信小程序源码 云开发菜谱微信小程序源码
京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程 让您轻松学会做美食.对不同食材和地域的饮食做了不同的分类和详细的做菜方法 分类十分详细 ...
- c#打印程序原码_C#程序打印新行
c#打印程序原码 C#打印新行 (C# printing a new line) To print a new line within the message while printing it on ...
- 小程序源码:求职招聘微信小程序源码下载v4.1.78
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 小程序源码:求职招聘微信小程序-多玩法安装简单
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 九宫格心形拼图小程序源码/带流量主微信小程序源码
九宫格心形拼图小程序源码/带流量主微信小程序源码 ☑️ 编号:ym476 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:500KB ☑️ 类型:九宫格心形拼图 ☑️ 支持:微信小程序
- 【微信小程序】去水印小程序源码,微信和QQ小程序都能用!
比较火的去水印小程序源码,微信和QQ小程序都能用! 独立后台,可以很好的管理小程序 简单修改和管理流量主广告无需修改源码 小程序源码下载地址:(30条消息) [微信小程序]去水印小程序源码,微信和QQ ...
- WordPress微信壁纸小程序源码 高清壁纸下载小程序
源码介绍 WordPress微信壁纸小程序源码 高清壁纸下载小程序 [功能特点] 精美的壁纸展示页面,搜索喜欢的壁纸,下载壁纸需观看激励视频广告,看一次,可免费下一天,热门壁纸榜单,壁纸收藏.分享功能 ...
- 【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了 因为这是一款检讨书生成小程序 所以再也不用为了写检讨而烦恼了哦 支持自定义字数下线,主题自定义 支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
最新文章
- 脱贫利器 | PYTHON多线程行情抓取工具实现
- 洛谷P3779 [SDOI2017]龙与地下城(概率论+Simpson+FFT)
- UVa 389 Basically Speaking
- left join 不重复_R语言ETL工程:连接(join)
- 全球及中国生物柴油行业产量规模及市场消费需求预测报告2021-2027年
- PHP学习总结(数据库概念、DDL语句、DML语句)
- IdHTTP1.Get(url)得到的源码怎么跟直接浏览的不一样呢?
- 直接用Jdbc就能操作数据库了,为什么还要用spring框架
- 倾心家教安卓案例开发代码_开发一个APP多少钱?
- python怎么隐藏输入法,隐藏输入法和弹出输入法
- top 监控系统内存、进程的资源占用情况
- 韩顺平 jdbc 之 mysql,(韩顺平讲解)jdbc学习(四)---java连接mysql
- 接口测试流程及常见问答
- 流体动力matlab仿真,IND4动力总成丨基于MATLAB simulink的液力变矩器仿真建模
- 自动整理html书签,Bookmarks Organizer - Chrome书签整理排序
- 《吴军.科技史纲60讲》摘录
- 安科瑞无线测温方案part1
- python画彩虹代码_python绘制彩虹图
- 谷歌浏览器崩溃:STATUS_INVALID_IMAGE_HASH
- 加息靴子落地铁矿石继续反弹,甲醇认购大涨,苹果10-01大跳水2022.5.5
热门文章
- android常用的工厂模式,Android的设计模式-简单工厂模式
- 使用python排序_Python排序
- java循环语句_循环你都学会了,那if不是so easy了嘛
- Tiktok预计下半年开通购物车,你有想法做吗?
- php.ini 是否设置路由,php – 如何在路由INI文件中为Zend Framework中的子域编写路由链?...
- 并行算法第五讲:Pthread编程
- 白板机器学习笔记 P36-P38核方法
- 《Java 8 in Action》Chapter 12:新的日期和时间API
- vue中定义多重样式
- 【二十二】win 10 :Jmeter 报告可视化 —— 配置 Jmeter 接口 HTML 可视化测试报告,Jenkins + Jmeter + Ant 自动化集成环境搭建