Click here to Skip to main content
15,120,478 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:


HTML
<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.
Posted
Updated 12-Nov-17 23:57pm

1 solution

check the correction

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

       // Check browser support
       if (typeof (Storage) !== "undefined") {
           // Store
           debugger
           var value = document.getElementById("tekst2").innerText; // use innerText to get the text content
           localStorage.setItem("tekst", value );  // here the storage key is tekst
           // Retrieve
           document.getElementById("tekst2").innerText = localStorage.getItem("tekst");  // here also the key should be same
       } else {
           document.getElementById("tekst2").innerText = "Sorry, your browser does not support Web Storage...";  // user innerText
       }
   
Comments
Member 13507633 13-Nov-17 4:58am
   
@Karthik Bangalore Still doesnt work? When i close the browser and open it again text doesnt stay.
Karthik_Mahalingam 13-Nov-17 6:42am
   
did you host the application?
Member 13507633 13-Nov-17 6:59am
   
i run it on localhost, is this a problem? i run it on xampp, also tried firefox and chrome
Karthik_Mahalingam 13-Nov-17 7:01am
   
post the url
Member 13507633 13-Nov-17 7:02am
   
It is not a global wwww. link.
Karthik_Mahalingam 13-Nov-17 7:04am
   
did you load the html file directly from the folder or though hosted service like IIS , node js, visual studio ?
Member 13507633 13-Nov-17 7:03am
   
https://codepen.io/timdt/pen/ooWKaQ
Member 13507633 13-Nov-17 7:04am
   
Directly from the folder
Karthik_Mahalingam 13-Nov-17 7:05am
   
then it wont work, you will have to host it. this is how the client storage mechanism works.
Member 13507633 13-Nov-17 7:21am
   
Oke thank you i will upload it to wordpress or open it in visual studio

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900