Fatal编程技术网
  • javascript/
  • Javascript Jquery中的本地存储和表单

Javascript Jquery中的本地存储和表单

javascript jquery

Javascript Jquery中的本地存储和表单,javascript,jquery,local-storage,Javascript,Jquery,Local Storage,我有一个div（表单），当你点击一个按钮时会出现， 我需要能够用jquery存储表单的信息。 由于技术原因，我不能使用PHP，因此我转向localStorage，它看起来很简单，但与我的代码不太兼容： $(document).ready(function(){ var i = 5; $('.addbox').click(function(){ $('.formdiv').removeClass('formdiv'); $('#formulaire').addC

我有一个div（表单），当你点击一个按钮时会出现， 我需要能够用jquery存储表单的信息。 由于技术原因，我不能使用PHP，因此我转向localStorage，它看起来很简单，但与我的代码不太兼容：

$(document).ready(function(){
  var i = 5;

  $('.addbox').click(function(){ 
      $('.formdiv').removeClass('formdiv');
      $('#formulaire').addClass('formdivdisplay');
  });

  $('#submit').click(function(){
      var titre = $('#titleform').val();
      var chemin = $('#chemin').val();
      var name = $('#name').val();
      var statue = $('#statue').val();
      var side = $('#select').val();

      localStorage.setItem('titre', titre);
      localStorage.setItem('chemin', chemin);
      localStorage.setItem('name', name);
      localStorage.setItem('statue', statue);
      localStorage.setItem('side', side);

      i = i + 1;


 });

    function drawBox(){
       var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';

       localStorage.setItem('block', block);     

      $('.container').append(localStorage.getItem('block'));

    }   
});

$（文档）.ready（函数（）{
var i=5；
$（'.addbox'）。单击（函数（）{
$（'.formdiv'）.removeClass（'formdiv'）；
$（'#formulaire'）.addClass（'formdivdisplay'）；
});
$（“#提交”）。单击（函数（）{
变量titre=$（'#titleform'）.val（）；
var chemin=$（'#chemin'）.val（）；
var name=$（'#name'）.val（）；
var status=$（'#status'）.val（）；
var-side=$（'#select'）.val（）；
localStorage.setItem（'titre'，titre）；
setItem（'chemin'，chemin）；
setItem（'name'，name）；
localStorage.setItem（'雕像'，雕像）；
setItem（'side'，side）；
i=i+1；
});
函数drawBox（）{
var block=''+localStorage.getItem（'titre'）+''；
setItem（'block'，block）；
$（'.container'）.append（localStorage.getItem（'block'）；
}   
});
HTML代码：

    <!DOCTYPE html>
<html lang="fr">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Bienvenue sur SAKADO</title>

  <!--  Styles  -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="scripts/app.js"></script>
  <link rel="stylesheet" href="styles/index.css">
  <link rel="stylesheet" href="styles/nouvelleoutils.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Space+Mono&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  <script defer src="https://friconix.com/cdn/friconix.js"></script> 
</head>
<body>

  <!--design-->
<div id="left"></div>
<div id="right"></div>
<div id="top">
  <h1 class="h1 animated fadeInRight">SAKADO</h1>
  <div class="divheader">
  <a class="a1 active" href="home.html">Accueil</a>
  <a class="a2" href="demande.html">Demandes</a>
  <a class="a3" href="utilisation.html">Utilisation</a>
  </div>
</div>
<div id="bottom">
    <div class="addbox"><i class="fi-xwsuxl-plus-solid"></i></div>
</div>
  <!--design-->

  <div id="page">
    <p class="tlegend">Les textes en <span class="Svert">Vert</span> sont les chemins d'accès, en <span class="Sorange">Orange</span> des informations importantes.</p>

   <!--Box glossaire-->
   <div class="container"> 
    <div class="box">
      <h1 class="boxtitle animated fadeInUp delay-500ms">Glossaire du CSG</h1>
      <p class="Sbleu statue">Public</p>
      <p class="Svert links "><a class="Svert">V:\Operations\GLOSSAIRE ver07-00 du 071212.pdf</a></p>
      <a class="boxbtn" href="docs/GLOSSAIRE ver07-00 du 071212.pdf" target="_blank">Obtenir</a>
    </div>
    <!--Box Site Survey DDO-->
    <div class="boxindex2">
      <h1 class="boxtitle animated fadeInUp delay-500ms">Site Survey DDO</h1>
      <p class="Srouge statue">Privée</p>
      <p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_Site Survey\site survey DDO presentation générale.pptx</a></p>
      <a class="boxbtn" href="docs/site survey DDO presentation générale.pptx" target="_blank">Obtenir</a>
    </div>
     <!--OLC modele Galileo-->
    <div class="boxindex3">
      <h1 class="boxtitle animated fadeInUp delay-500ms">Modèle OLC Galileo</h1>
      <p class="Srouge statue ">Privée</p>
      <p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_OLC modèle\OLC - VA244 GALILEO FOC-M8 1-3.docx</a></p>
      <a class="boxbtn" href="docs/OLC - VA244 GALILEO FOC-M8 1-3.docx" target="_blank">Obtenir</a>
    </div>
     <!--Modele DM Galileo-->
    <div class="boxindex4">
      <h1 class="boxtitle animated fadeInUp delay-500ms">Modèle DM Galileo</h1>
      <p class="Srouge statue ">Privée</p>
      <p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx</a></p>
      <a class="boxbtn" href="docs/VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx" target="_blank">Obtenir</a>
    </div>  
     <!--Modele M8 Galileo-->
    <div class="boxindex5">
      <h1 class="boxtitle animated fadeInUp delay-500ms">Modèle M8 Galileo</h1>
      <p class="Srouge statue ">Privée</p>
      <p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244-GALILEO FOC M8 -- DM One.docx</a></p>
      <a class="boxbtn" href="docs/VA244-GALILEO FOC M8 -- DM One.docx" target="_blank">Obtenir</a>
    </div> 
     <!--Box "A INSERER"
    <div class="boxindex6">
      <h1 class="boxtitle animated fadeInUp delay-500ms">"À INSÉRER"</h1>
      <p class="statue ">Privée / Public</p>
      <p class="Svert links "><a class="Svert">\\</a></p>
      <p class="Sorange impt "></p>
      <a class="boxbtn" href="docs/" target="_blank">Obtenir</a>
    </div>-->

   </div>

  </div>

    <!--Formulaire-->
   <div class="formdiv" id="formulaire">
    <form>
        <h1 id="h1form">Ajouts d'Outils</h1>
        <label for="title">Titre de l'outil</label>:<input type="text" id="titleform" name="title"><br /><br />

        <label for="title">Entrez le chemin du nouvelle Outil</label>:<input type="text" id="chemin" name="chemin"><br /><br />

        <label for="title">Entrez le nom.lextension du fichier</label>:<input type="text" id="name" name="name"><br /><br />

        <label for="title">Entrez le Statue de votre Outil</label>:<input type="text" id="statue" name="statue"><br /><br />

        <label for="title">Affichage de l'Outil</label>:<select id="select" name="side" form="side">
        <option value="droite">Droite</option>
        <option value="gauche">Gauche</option>
        </select><br /><br />

        <input id="submit" type="submit" value="envoyer">
    </form>
  </div>   

</body>
</html>


萨卡多河畔边湾酒店
萨卡多

将文本转换为化学物质，将信息转换为重要信息

CSG词汇表
公众



站点调查DDO
私人



伽利略模型
私人



伽利略模型
私人



伽利略模型
私人



奥提尔斯酒店
卢蒂尔的头衔：


新奥尔良化学中心：


名字和词汇量：


奥特里尔雕像展：


欧蒂尔公寓：
德罗特
笨拙的
我希望当用户单击validate local storage时，保存所有这些信息，然后用他刚刚输入的数据显示代码html和css（稍后），并且html代码显然会无限期地保留在页面上

谢谢。

欢迎来到stackoverflow。如果打开开发工具（右键单击=>inspect），然后转到应用程序选项卡，您应该能够在左侧选择本地存储。你看到你的值被保存了吗？请同时添加HTML代码，这样我们就可以看到你在代码中提到的每一项。它被添加了，值被保存在本地存储中，但是如果我执行“console.log（localStorage（'titre'）；”操作，标题就不会出现。很抱歉用英语。你必须执行
localStorage.getItem（'titre'））
获取值。要设置值，必须使用
localStorage.setItem（'titre'，val）
。您可以在此处参考API文档：是的，我就是这么做的。