我如何使用localstorage？ [英] How do I use localstorage?

问题描述

嘿，伙计们，在过去的几天里，我真的很难实施本地存储。由于某种原因，我不能让它工作（这可能是因为我不明白它是如何工作的）我想要托管一个静态的html页面，输入必须保存。



这是我的代码：

 <   pre  >  <  ！DOCTYPE     html  >  
 <   html  >  
 <   head  >  
 <   title  < span class =code-keyword>>  Adwords Applicatie <   / title  >  
 <   script     src   =  http://ajax.googleapis.com/ajax/libs/jquery/1.10.1 /jquery.min.js\">  <   /  脚本 >  
 
 <！ -    样式开头   - >   
 <   style  >  
 
 
  body  {
 
} 
＃ inputWrapper  {
  margin  ：  190px auto;  
  right  ： < span class =code-keyword> 473.500;  
  width  ： < span class =code-keyword> 620px;  
  height  ： < span class =code-keyword> 100％;  
} 
 
＃ input1  {
  width  ：  100％;  
  height  ：  75px;  
  border  ：  solid black 1px;  
  margin-top  ：  45px;  
  padding  ：  0px;  
 自动换行 ： 断字;  
} 
 
 
 
 
  h3  {
  padding  ：  0px;  
  margin  ：  0px;  
  font-family  ：  arial，sans-serif ;  
 颜色 ： ＃ 1a0dab;  
  text-align  ：  left;  
  cursor  ： 指针;  
  font-size  ：  18px;  
} 
 
  p  {
  color  ：  rgb（0,102,33）;  
  font-size  ：  14px;  
  font-style  ： 正常;  
  height  ：  auto;  
  width  ：  auto;  
  text-align  ：  left;  
  display  ：  block;  
  font-weight  ：  400px;  
  line-height  ：  16px;  
  padding  ：  0px;  
  margin  ：  0px;  
  font-family  ：  arial，sans-serif;  
  cursor  ： 指针;  
 自动换行 < span class =code-keyword>：  break-word;  
  cursor  ： 抓住;  
 
 
} 
 
。 text  {
  color  ：   rgb（84,84,84）;  
  font-size  ：  13px;  
  font-family  ：  arial，sans-serif;  
  text-align  ：  left;  
 自动换行 ：  break-word;  
  font-weight  ：  400;  
  line-height  ：  18.2px;  
  display  ：  inline;  
  margin  ：  0px;  
  padding  ：  0px;  
  padding-right  ：  25px;  
  cursor  ：  grab;  
} 
 
 
 
  / *   Input4 * /  
＃ inputsection  {
  margin  ：  0px;  
  padding  ：  0px;  
  width  ：  400px;  
  position  ： 绝对;  
  top  ：  600px;  
  left  ：  100px;  
} 
 
＃ labelcontainer  {
  clear  ：  right;  
  float  ：  left;  
  width  ：  100px;  
  display  ：  inline-block;  
 
} 
 
＃ inputcontainer  {
  width  ：  250px;  
  clear  ：  left;  
  display  ：  inline-block;  
 
} 
 
。 label  {
  display  ：  block;  
  clear  ：  right;  
  float  ：  left;  
  margin-top   ：  10px;  
  padding   ：  0px;  
 宽度 ：  100％;  
} 
 
 
 
。 inputfield  {
  display  ：  block;  
  clear  ：  right;  
  float  ：  left;  
  margin-top  < span class =code-keyword>：  10px;  
  padding  < span class =code-keyword>：  0px;  
} 
 
 
  / *   einde输入4 * /  
 
 
 
 
 
 
  / *  输入2 * /  
＃ inputsection2  {
 保证金 ：  0px;  
 填充 ：  0px;  
  width  ：  400px;  
 位置 ： 绝对;  
  top  ：  350px;  
  left  ：  100px;  
} 
 
＃ labelcontainer2  {
  clear  ：  right;  
  float  ：  left;  
  width  ：  100px;  
  display  ：  inline-block;  
 
} 
 
＃ inputcontainer2  {
  width  ：  250px;  
  clear  ：  left;  
  display  ：  inline-block;  
 
} 
 
。 label2  {
  display  ：  block;  
  clear  ：  right;  
  float  ：  left;  
  margin-top  ：  10px;  
  padding  ：  0px;  
  width  ：  100％;  
} 
 
 
 
。 inputfield2  {
  display  ：  block;  
  clear  ：  right;  
  float  ：  left;  
  margin-top  ：  10px;  
  padding  ：  0px;  
} 
 
 
 
 
 
  / *  输入3 * /  
＃ inputsection3  {
 边距 ：  0px;  
 填充 ：  0px;  
  width  ：  400px;  
 位置 ： 绝对;  
  top  ：  475px;  
 左 ： < span class =code-keyword> 100px;  
} 
 
＃ labelcontainer3  {
 < span class =code-attribute> clear  ：  right;  
 < span class =code-attribute> float  ：  left;  
 < span class =code-attribute> width  ：  100px;  
 < span class =code-attribute> display  ：  inline-block;  
 
 
} 
 
＃ inputcontainer3  {
  width  ：  250px;  
  clear  ：  left;  
  display  ：  inline-block;  
 
} 
 
。 label3  { 
  display  ：  block;  
  clear  ：  right;  
  float  ：  left;  
  margin-top  ：  10px;  
  padding  ：  0px;  
  width  ：  100％;  
} 
 
 
 
。 inputfield3  {
  display  ： 阻止;  
  clear  ： 正确;  
  float  ：  left;  
  margin-top  ：  10px;  
  padding  ：  0px;  
} 
 
 
 
 
 
。 logo  {
  padding  ：  0px;  
  margin  ：  0px;  
  width  ：  20％;  
  height  ：  20％;  
 
} 
 
。 inputfield  {
  background-color  ： ＃3CBC8D;  
 颜色 ： 白色;  
} 
 
。 inputfield2  {
  background-color  ： ＃3CBC8D;  
  color  ： 白色;  
} 
 
。 inputfield3  {
  background-color  ：  ＃3CBC8D;  
 颜色 ： 白色;  
} 
 
 。 google  {
  margin  ：  0px;  
  padding  ：  0px;  
  border  ：  0px;  
  position  ： 绝对;  
  top  ：  40px;  
  left  ：  290px;  
} 
 
 
 < /  样式 >  
 <！ -    结束时间   - >   
 <   / head  >  
 
 <  正文 >  
 
 
 
 <   img     class   =  logo    src   =  treelogo.png    /  >  
 < ;   div     id  < span class =code-keyword> =  inputWrapper >  
 
 <   img     class   =  google    src   =  achtergrond.png    /  > ;  
 
 
 <！ -    说明中最多160个字符   - >   
 <   div     id   =  input1 >  
 <   h3  >  Tree Online  - 互联网营销局<   / h3   >  
 <   p  >  https://www.treeonline.nl/ <   / p  < span class =code-keyword>>  
 <   span     class   =  text >  Meer bezoekers？ Meer klanten？ Meer omzet？树在线是een ervaren在线营销局遇到bewezen结果在多种markten en分支。<   / span  < span class =code-keyword>>  
 <   / div  >  
 
 <   div     id   =  input1 >  
 <   h3     id   =  tekst2 >  <   / h 3  >  
 <   p     id   =  p2 >  <  < span class =code-leadattribute> / p  >  
 <   span     id   =  span2    class   =  text >  <   / span  >  
 <   / div  >  
 
 <！ -    名称：< input id =nametype =text> 
< button onclick =go（）> Go< / button> 
    - >   
 
 <   div     id   =  input1 >  
 <   h3     id   =  tekst3 >  <   / h3   >  
 <   p     id   =  p3 <跨度class =code-keyword>>  <   / p  >  
 <   span     id   =  span3    class   =  text >  <   / span  >  
 <   / div  >  
 
 
 <   div     id   =  input1  > 
         <h3 id=\"tekst4\"></h3 > 
         <p id=\"p4\"></p> 
         <span id=\"span4\" class=\"text\"></span> 
     </div> 
 </div> 
 <!-- input sectie voor slider 2 --> 
 <div id=\"inputsection2\"> 
  
 <div id=\"labelcontainer2\"> 
 <label class=\"label2\" for=\"title2\">Titel</label> 
 <label class=\"label2\" for=\"slug2\">Website url</label> 
 <label class=\"label2\" for=\"description2\">Beschrijving</label> 
 </div> 
  
 <div id=\"inputcontainer2\"> 
 <input class=\"inputfield2\" id=\"title2\" maxlength=\"60\"/> 
 <input class=\"inputfield2\" id=\"slug2\"/> 
 <input class=\"inputfield2\" id=\"description2\" maxlength=\"160\"/> 
 </div> 
  
 </div> <!-- input section2 close --> 
  
 <div id=\" inputsection3\"> 
  
 <div id=\"labelcontainer3\"> 
 <label class=\"label3\" for=\"title3\">Titel</label> 
 <label class=\"label3\" for=\"slug3\">Website url</label> 
 <label class=\"label3\" for=\"description3\">Beschrijving</label> 
 </div> 
  
 <div id=\"inputcontainer\"> 
 <input class=\"inputfield3\" id=\"title3\" maxlength=\"60\" /> 
 <input class=\"inputfield3\" id=\"slug3\"/> 
 <input class=\"inputfield3\" id=\"description3\" maxlength=\"160\"/> 
 </div> 
  
 </div> <!-- input section 3 close --> 
  
 <div id=\"inputsection\"> 
  
 <div id=\"labelcontainer\"> 
 <label class=\"label\" for=\"title\">Titel</label> 
 <label  class=\"label\" for=\"slug\">Website url</label> 
 <label class=\"label\" for=\"description\">Beschrijving</label> 
 </div> 
  
 <div id=\"inputcontainer\"> 
 <input class=\"inputfield\" id=\"title\" maxlength=\"60\"/> 
 <input class=\"inputfield\" id=\"slug\"/> 
 <input class=\"inputfield\" id=\"description\" maxlength=\"160\"/> 
 </div> 
  
 </div> <!-- input section close --> 
  
  
  
  
 <!-- add javscript here --> 
 <script> 
  
 //code voor inpute nummer 2 
 $(\"#title2\").on('change input',function(){ 
 $('#tekst2').html($(this).val()); 
 }) 
  
 $(\"#slug2\").on('change input',function(){ 
 $('#p2').html($(this).val()); 
 }) 
  
 $(\"#description2\").on('change input',function(){ 
 $('#span2').html($(this).val()); 
 }) 
  
  
 // code voor input nummer 3 
 $(\"#title3\").on('change input',function(){ 
 $('#tekst3').html($(this).val()); 
 }) 
  
 $(\"#slug3\").on('change input',function(){ 
 $('#p3').html($(this).val()); 
 }) 
  
 $(\"#description3\").on('change input',function(){ 
 $('#span3').html($(this).val()); 
 }) 
  
  
  
 //code voor input nummer 4 
 $(\"#title\").on('change input',function(){ 
 $('#tekst4').html($(this).val()); 
 }) 
  
 $(\"#slug\").on('change input',function(){ 
 $('#p4').html($(this).val()); 
 }) 
  
 $(\"#description\").on('change input',function(){ 
 $('#span4').html($(this).val()); 
 }) 
  
 var titelopslaan = document.getElementById(\"tekst2\"); 
 var opslaan = localStorage[titelopslaan]; 
  
 // Check browser support 
 if (typeof(Storage) !== \"undefined\") { 
     // Store 
     localStorage.setItem(\"tekst\", document.getElementById(\"tekst2\")); 
     // Retrieve 
     document.getElementById(\"tekst2\").innerHTML = localStorage.getItem(\"tekst2\"); 
 } else { 
     document.getElementById(\"tekst2\").innerHTML = \"Sorry, your browser does not support Web Storage...\"; 
 } 
  
  
 /*function go() { 
   var Adv1 = document.getElementById(\"tekst1\"); 
   var Adv1p1 = document.getElementById(\"p1\"); 
   var Advertentie1    = Adv1.textContent += var text = document.getElementById(\"name\").value; 
   var p1              = Adv1p1.textContent 
 } 
 */ 
  
 //var Adv1 = document.getElementById(\"tekst1\"); 
 //var Adv1p1 = document.getElementById(\"p1\"); 
 //var adv1s1 = document.getElementById(\"span1\"); 
  
  
 //var Adv2 = document.getElementById(\"tekst2\"); 
 //var Adv2p2 = document.getElementById(\"p2\"); 
  
  
 //var Adv3 = document.getElementById(\"tekst3\"); 
 //var Adv3p3 = document.getElementById(\"p3\"); 
  
  
 //var Connect = new XMLHttpRequest(); 
  
 //var Advertentie1    = Adv1.textContent    +=  prompt(\"Wat is de Titel\",\"Voer hier uw titel in\"); 
 //var p1              = Adv1p1.textContent  +=  prompt(\"Url-pagina\",\"Voer hier uw url in\"); 
 //var smalltextspan   = adv1s1.textContent  +=  prompt(\"description\",\"add your description here\"); 
  
 //var Advertentie2    = Adv2.textContent    +=  prompt(\"Wat is de Titel\",\"Voer hier uw titel in\"); 
 //var p2              = Adv2p2.textContent  +=  prompt(\"Url-pagina\",\"Voer hier uw url in\"); 
  
 //var Advertentie3    = Adv3.textContent    +=  prompt(\"Wat is de Titel\",\"Voer hier uw titel in\"); 
 //var p3              = Adv3p3.textContent  +=  prompt(\"Url-pagina\",\"Voer hier uw url in\"); 
  
 </script> 
  
 </body> 
 </html>

What I have tried:



I have tried allot, and it all didnt work.

解决方案

(\"#title2\").on('change input',function(){

('#tekst2').html(

(this).val());
})

Hey guys and girls,for the past couple of days i am really struggeling to implement localstorage. For some reason i cannot get it working ( that is probably because i dont understand how it works ) I want to host a static html page and the input must be saved.

here is my code:

<pre><!DOCTYPE html>
<html>
<head>
    <title>Adwords Applicatie</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <!-- beginning of style -->
    <style>


body{

}
#inputWrapper{
  margin:190px auto;
  right:473.500;
  width:620px;
  height:100%;
}

#input1 {
  width:100%;
  height:75px;
  border:solid black 1px;
  margin-top:45px;
  padding:0px;
  word-wrap: break-word;
}




    h3 {
      padding:0px;
      margin:0px;
      font-family: arial,sans-serif;
      color:#1a0dab;
      text-align: left;
      cursor: pointer;
      font-size:18px;
    }

    p {
      color:rgb(0, 102, 33);
      font-size: 14px;
      font-style: normal;
      height: auto;
      width: auto;
      text-align: left;
      display: block;
      font-weight: 400px;
      line-height: 16px;
      padding: 0px;
      margin:0px;
      font-family: arial,sans-serif;
      cursor: pointer;
      word-wrap: break-word;
      cursor:grab;


    }

    .text {
    color:rgb(84, 84, 84);
    font-size: 13px;
    font-family: arial,sans-serif;
    text-align: left;
    word-wrap: break-word;
    font-weight: 400;
    line-height: 18.2px;
    display: inline;
    margin:0px;
    padding:0px;
    padding-right:25px;
    cursor:grab;
    }



/*           Input4                           */
    #inputsection{
    margin: 0px;
    padding:0px;
    width:400px;
    position: absolute;
    top:600px;
    left:100px;
    }

      #labelcontainer {
        clear:right;
        float: left;
        width:100px;
        display: inline-block;

      }

      #inputcontainer{
        width:250px;
        clear: left;
        display: inline-block;

      }

      .label{
        display: block;
        clear: right;
        float: left;
        margin-top: 10px;
        padding:0px;
        width:100%;
      }



        .inputfield{
          display: block;
          clear: right;
          float: left;
          margin-top: 10px;
          padding:0px;
        }


/*     einde input 4                                 */






/*              Input 2              */
            #inputsection2{
            margin: 0px;
            padding:0px;
            width:400px;
            position: absolute;
            top:350px;
            left:100px;
            }

          #labelcontainer2 {
            clear:right;
            float: left;
            width:100px;
            display: inline-block;

          }

          #inputcontainer2{
            width:250px;
            clear: left;
            display: inline-block;

          }

          .label2{
            display: block;
            clear: right;
            float: left;
            margin-top: 10px;
            padding:0px;
            width:100%;
          }



            .inputfield2{
              display: block;
              clear: right;
              float: left;
              margin-top: 10px;
              padding:0px;
            }





            /*              Input 3              */
                        #inputsection3{
                        margin: 0px;
                        padding:0px;
                        width:400px;
                        position: absolute;
                        top:475px;
                        left:100px;
                        }

                      #labelcontainer3 {
                        clear:right;
                        float: left;
                        width:100px;
                        display: inline-block;


                      }

                      #inputcontainer3{
                        width:250px;
                        clear: left;
                        display: inline-block;

                      }

                      .label3{
                        display: block;
                        clear: right;
                        float: left;
                        margin-top: 10px;
                        padding:0px;
                        width:100%;
                      }



                        .inputfield3{
                          display: block;
                          clear: right;
                          float: left;
                          margin-top: 10px;
                          padding:0px;
                        }





        .logo{
          padding: 0px;
          margin: 0px;
          width:20%;
          height: 20%;

        }

        .inputfield{
          background-color: #3CBC8D;
          color: white;
        }

        .inputfield2{
          background-color: #3CBC8D;
          color: white;
        }

        .inputfield3{
          background-color: #3CBC8D;
          color: white;
        }

        .google{
          margin:0px;
          padding:0px;
          border:0px;
          position: absolute;
          top:40px;
          left:290px;
        }


    </style>
  <!-- end of style -->
</head>

<body>



  <img class="logo" src="treelogo.png" />
<div id="inputWrapper">

  <img class="google" src="achtergrond.png" />


<!-- max 160 characters in description -->
    <div id="input1">
        <h3>Tree Online - Internet marketing bureau</h3>
        <p>https://www.treeonline.nl/ </p>
        <span class="text">Meer bezoekers? Meer klanten? Meer omzet? Tree Online is een ervaren online marketing bureau met bewezen resultaten in diverse markten en branches.</span>
    </div>

    <div id="input1">
        <h3 id="tekst2"></h3>
        <p id="p2"></p>
        <span id="span2" class="text"></span>
    </div>

    <!--Name: <input id="name" type="text">
    <button onclick="go()">Go</button>
    -->

    <div id="input1">
        <h3 id="tekst3"></h3>
        <p id="p3"></p>
        <span id="span3" class="text"></span>
    </div>


    <div id="input1">
        <h3 id="tekst4"></h3>
        <p id="p4"></p>
        <span id="span4" class="text"></span>
    </div>
</div>
<!-- input sectie voor slider 2 -->
<div id="inputsection2">

<div id="labelcontainer2">
<label class="label2" for="title2">Titel</label>
<label class="label2" for="slug2">Website url</label>
<label class="label2" for="description2">Beschrijving</label>
</div>

<div id="inputcontainer2">
<input class="inputfield2" id="title2" maxlength="60"/>
<input class="inputfield2" id="slug2"/>
<input class="inputfield2" id="description2" maxlength="160"/>
</div>

</div> <!-- input section2 close -->

<div id="inputsection3">

<div id="labelcontainer3">
<label class="label3" for="title3">Titel</label>
<label class="label3" for="slug3">Website url</label>
<label class="label3" for="description3">Beschrijving</label>
</div>

<div id="inputcontainer">
<input class="inputfield3" id="title3" maxlength="60" />
<input class="inputfield3" id="slug3"/>
<input class="inputfield3" id="description3" maxlength="160"/>
</div>

</div> <!-- input section 3 close -->

<div id="inputsection">

<div id="labelcontainer">
<label class="label" for="title">Titel</label>
<label class="label" for="slug">Website url</label>
<label class="label" for="description">Beschrijving</label>
</div>

<div id="inputcontainer">
<input class="inputfield" id="title" maxlength="60"/>
<input class="inputfield" id="slug"/>
<input class="inputfield" id="description" maxlength="160"/>
</div>

</div> <!-- input section close -->




<!-- add javscript here -->
<script>

//code voor inpute nummer 2
$("#title2").on('change input',function(){
$('#tekst2').html($(this).val());
})

$("#slug2").on('change input',function(){
$('#p2').html($(this).val());
})

$("#description2").on('change input',function(){
$('#span2').html($(this).val());
})


// code voor input nummer 3
$("#title3").on('change input',function(){
$('#tekst3').html($(this).val());
})

$("#slug3").on('change input',function(){
$('#p3').html($(this).val());
})

$("#description3").on('change input',function(){
$('#span3').html($(this).val());
})



//code voor input nummer 4
$("#title").on('change input',function(){
$('#tekst4').html($(this).val());
})

$("#slug").on('change input',function(){
$('#p4').html($(this).val());
})

$("#description").on('change input',function(){
$('#span4').html($(this).val());
})

var titelopslaan = document.getElementById("tekst2");
var opslaan = localStorage[titelopslaan];

// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("tekst", document.getElementById("tekst2"));
    // Retrieve
    document.getElementById("tekst2").innerHTML = localStorage.getItem("tekst2");
} else {
    document.getElementById("tekst2").innerHTML = "Sorry, your browser does not support Web Storage...";
}


/*function go() {
  var Adv1 = document.getElementById("tekst1");
  var Adv1p1 = document.getElementById("p1");
  var Advertentie1    = Adv1.textContent += var text = document.getElementById("name").value;
  var p1              = Adv1p1.textContent
}
*/

//var Adv1 = document.getElementById("tekst1");
//var Adv1p1 = document.getElementById("p1");
//var adv1s1 = document.getElementById("span1");


//var Adv2 = document.getElementById("tekst2");
//var Adv2p2 = document.getElementById("p2");


//var Adv3 = document.getElementById("tekst3");
//var Adv3p3 = document.getElementById("p3");


//var Connect = new XMLHttpRequest();

//var Advertentie1    = Adv1.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p1              = Adv1p1.textContent  +=  prompt("Url-pagina","Voer hier uw url in");
//var smalltextspan   = adv1s1.textContent  +=  prompt("description","add your description here");

//var Advertentie2    = Adv2.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p2              = Adv2p2.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

//var Advertentie3    = Adv3.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p3              = Adv3p3.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

</script>

</body>
</html>

What I have tried:

I have tried allot, and it all didnt work.

解决方案

("#title2").on('change input',function(){

('#tekst2').html(

(this).val()); })

这篇关于我如何使用localstorage？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！