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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
树结构之JavaScript
Jan 24 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
关于延迟加载JavaScript
2015/05/05 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
javascript事件模型介绍
2016/05/31 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
django模板语法学习之include示例详解
2017/12/17 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
ktv收银员岗位职责
2013/12/16 职场文书
客服专员岗位职责
2014/02/28 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
竞聘书模板
2014/03/31 职场文书
毕业留言寄语大全
2014/04/10 职场文书
法院授权委托书范文
2014/08/02 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
公司人事任命通知
2015/04/20 职场文书
校运会新闻稿
2015/07/17 职场文书
导游词之日月潭
2019/11/05 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
详解Python中__new__方法的作用
2022/03/31 Python