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 相关文章推荐
js获取图片大小的函数代码
Sep 20 Javascript
js中有关IE版本检测
Jan 04 Javascript
jQuery 插件开发指南
Nov 14 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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
xml+php动态载入与分页
2006/10/09 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python从零开始创建区块链
2018/03/06 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
使用pandas读取文件的实现
2019/07/31 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
大学生冰淇淋店商业计划书
2014/01/14 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
广告宣传策划方案
2014/05/21 职场文书
幸福中国演讲稿
2014/09/12 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
自我查摆剖析材料
2014/10/11 职场文书
天气温馨提示语
2015/07/14 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python