Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: LocalStorage

  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts

    LocalStorage

    What is an easy way to use localstorage?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Hm ok ...

    localStorage can store values to keys, so the easy way is (as shown before)

    Code:
    if(window.localStorage) {
       window.localStorage.KEY = VALUE;
    }
    If you (for example) want to store a list of reserved seats for the current user, you'll have to find a way to

    a) identify all the seats (e.g. all the <div> elements)
    b) identify the reserved seats within all seats (e.g. with class 'zwart')

    Then you can extract the information into an array and then store this array

    Code:
    var theSeats = document.getElementsByTagName('div');
    var theArray = [];
    for(i=0, len = theSeats.length; i<len; i++) {
       if(theSeats[i].className=='zwart') {
          theArray.push(1);
       } else {
          theArray.push(0);
       }
    }
    // here you will have theArray = [0,1,0,0,0,0,0,1,0,....] where 0 is not reserved and 1 is reserved
    // then store this array
    if(window.localStorage) window.localStorage.seats = theArray;

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I assume I have to copy/paste this into JS?

  • #4
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Can you show me a line for a seat in the html file? I could do the rest then I guess.

    Here is one line.
    Code:
    <div id="blauw3" class = "blauw" onclick = "res(this.id)"></div>
    EDIT:

    I think it's correct, I just need to extract the information into an array and then store this array

    Using JS and PHP I guess. Why do you have

    Code:
    if(window.localStorage) window.localStorage.seats = theArray;
    as your last line? Shouldn't you use a }?


    EDIT 2:

    Code:
    function localstorage () {
    var theSeats = document.getElementsByTagName('div');
    var theArray = [];
    for(i=0, len = theSeats.length; i<len; i++) {
       if(theSeats[i].className=='zwart') {
          theArray.push(1);
       } else {
          theArray.push(0);
       }
     if(window.localStorage) window.localStorage.seats = theArray;
    }
    What about this ^ In JS?
    Last edited by optimizer123; 10-30-2012 at 12:45 PM.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It should work if all(!) of the <div> elements on your page are seats. Otherwise you need to find another way to identify the seats (maybe by wrapping them with a <div> with class "seats")

    Code:
    <div class="seats">
       <div id="blauw3" class = "blauw" onclick = "res(this.id)"></div>
       <div id="rood5" class = "rood" onclick = "res(this.id)"></div>
       ...
    </div>
    
    function localstorage () {
    var theSeats = document.getElementsByClassName('seats')[0].getElementsByTagName('div');
    var theArray = [];
    for(i=0, len = theSeats.length; i<len; i++) {
       if(theSeats[i].className=='zwart') {
          theArray.push(1);
       } else {
          theArray.push(0);
       }
     if(window.localStorage) window.localStorage.seats = theArray;
    }

  • #6
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    How could i make a class 'seats' in css? since i dont want all the seats to change

    I copy pasted

    Code:
    function localstorage () {
    var theSeats = document.getElementsByClassName('seats')[0].getElementsByTagName('div');
    var theArray = [];
    for(i=0, len = theSeats.length; i<len; i++) {
       if(theSeats[i].className=='zwart') {
          theArray.push(1);
       } else {
          theArray.push(0);
       }
     if(window.localStorage) window.localStorage.seats = theArray;
    }
    Into JS, after saving it if i click on a seat it won't change colour anymore.
    Last edited by optimizer123; 10-30-2012 at 01:40 PM.

  • #7
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Here I got this:

    http://jsbin.com/idezef/1/

    Can you check the code there?

    Once I add your JS code in it it stops working.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You should know that you already had a class "seats". So when you introduce (for example) a class "allseats" to the outer div and add the call to localstorage() to the "Reserveer" button, it should do the trick

    Code:
    <div style="position: relative; width: 660px; height: 440px; border: 1px solid black" class="allseats" />
    ...
    <input type="button" value="Reserveer" onclick= "localstorage(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">
    
    function storeIt () {
       var theSeats = document.getElementsByClassName('allseats')[0].getElementsByTagName('div');
       var theArray = [];
       for(i=0, len = theSeats.length; i<len; i++) {
          if(theSeats[i].className=='zwart') {
             theArray.push(1);
          } else {
             theArray.push(0);
          }
       }
       if(window.localStorage) window.localStorage.seats = theArray;
    }

  • Users who have thanked devnull69 for this post:

    optimizer123 (10-30-2012)

  • #9
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Don't you mean:

    Code:
    <input type="button" value="Reserveer" onclick= "StoreIt(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">
    instead of:

    Code:
    <input type="button" value="Reserveer" onclick= "localstorage(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">

  • #10
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    So what do I put in Css?

    I assume i dont need php?

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Quote Originally Posted by optimizer123 View Post
    Don't you mean:

    Code:
    <input type="button" value="Reserveer" onclick= "StoreIt(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">
    instead of:

    Code:
    <input type="button" value="Reserveer" onclick= "localstorage(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">
    Yes sorry ... the call should be storeIt() because I renamed the function.

    You don't need to provide any CSS for the "allseats" class if you don't want to.

    You will need PHP or any other server side language if you plan to store the information not only for one user but for several users.

  • #12
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    with

    Code:
    <input type="button" value="Reserveer" onclick= "StoreIt(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')">
    My alert message doesnt popup anymore before the redirection

    EDIT:

    Also, how can i test if it works with the localstorage?

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Javascript is case sensitive. The function is called storeIt and not StoreIt

    You could output window.localStorage.seats on the Javascript console. I hope you know what the console is ... if not you should get used to developer tools (like Firebug for Firefox or built-in tools for IE, Opera or Chrome). Try to press F12 and then select the Console tab.

    And then
    Code:
    console.log(window.localStorage.seats);
    while you are still on the reservation page

  • #14
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Changed the function to lower case. Still no alert message is showing.

    Also, sorry but no idea what a console is;p

  • #15
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    OK I get this when i click on the console tab:

    The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

    It gives this code:

    Code:
    <input type="button" onclick="storeIt();" value="Reserveer">
    So not with my alert..
    Last edited by optimizer123; 10-30-2012 at 09:04 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •