热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

localStorage实现便签小程序

这篇文章主要为大家详细介绍了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 

'+mess.name+'

'+json[i].headle+'

'+json[i].date+'
'+'

'+json[i].diary+'

'; } } }

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


推荐阅读
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何使用Maven高效管理多模块项目,涵盖项目结构设计、依赖管理和构建优化等方面。通过具体的实例和配置说明,帮助开发者更好地理解和应用Maven在复杂项目中的优势。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
author-avatar
王妃2502872393
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有