localStorage实现便签小程序


Posted in Javascript onNovember 28, 2016

前言:今天写了个小练习,把这几天看的东西巩固一下,在这个程序中用到了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("昵称不为空"); 
  }
}

localStorage实现便签小程序

(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("标题和内容不为空哦"); 
 }
}

localStorage实现便签小程序

(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+='<div><button class="btn btn-success"'+'type="button" id="dropdownMenu" onclick="show(this)"><div class="col-md-4"><img src='+mess.icon+' class="img-circle size" id="userpic"><br><font style="text-align:center">'+mess.name+'</font></div><div class="col-md-8"><h2>'+json[i].headle+'</h2><font>'+json[i].date+'</font></div><span class="caret" style="margin-top:50px;">'+'</span></button><p style="display:none">'+json[i].diary+'</p><div>'; 
    }

  }
}

localStorage实现便签小程序

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
document.createElement()用法
Mar 13 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 #Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 #Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 #Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 #Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 #Javascript
js实现右键菜单功能
Nov 28 #Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 #Javascript
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
node.js不得不说的12点内容
2014/07/14 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python 为什么说eval要慎用
2019/03/26 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python中sys模块是做什么用的
2020/08/16 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript