...

View Full Version : LocalStorage



optimizer123
10-30-2012, 11:16 AM
What is an easy way to use localstorage?

devnull69
10-30-2012, 11:37 AM
Hm ok ...

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



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



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;

optimizer123
10-30-2012, 12:25 PM
I assume I have to copy/paste this into JS?

optimizer123
10-30-2012, 12:34 PM
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.

<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


if(window.localStorage) window.localStorage.seats = theArray;

as your last line? Shouldn't you use a }?


EDIT 2:



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?

devnull69
10-30-2012, 12:54 PM
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")



<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;
}

optimizer123
10-30-2012, 01:37 PM
How could i make a class 'seats' in css? since i dont want all the seats to change

I copy pasted


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.

optimizer123
10-30-2012, 01:46 PM
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.

devnull69
10-30-2012, 02:53 PM
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



<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;
}

optimizer123
10-30-2012, 05:45 PM
Don't you mean:


<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:


<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.')">

optimizer123
10-30-2012, 05:46 PM
So what do I put in Css?

I assume i dont need php?

devnull69
10-30-2012, 07:49 PM
Don't you mean:


<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:


<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.

optimizer123
10-30-2012, 08:27 PM
with


<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?

devnull69
10-30-2012, 08:35 PM
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


console.log(window.localStorage.seats);

while you are still on the reservation page

optimizer123
10-30-2012, 08:54 PM
Changed the function to lower case. Still no alert message is showing.

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

optimizer123
10-30-2012, 08:56 PM
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:


<input type="button" onclick="storeIt();" value="Reserveer">

So not with my alert..

devnull69
10-30-2012, 10:48 PM
I cannot see why it shouldn't work. If you didn't use a closing quote right after the storeIt(); it should still work, because it worked before. So please check the HTML of your <input> button again.

optimizer123
10-30-2012, 10:53 PM
Forgot to save the file *facepalm*

Alert works. Just dont know about saving cause I got no clue how to test.. If i push f5 it refreshes..

devnull69
10-31-2012, 12:07 AM
Which browser/version are you using? If Firefox, did you install the Firebug add-on?

With F12 you can open the developer tools in each browser, go to the Console tab and enter this line into the console command line and press enter (while still being on the reservation page):


console.log(window.localStorage.seats);

You should see a dump of an array like [0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,0..........]

optimizer123
10-31-2012, 12:44 AM
Using firefox and the firebug add-on (already for months)

I can't copy paste anything into the console tab

devnull69
10-31-2012, 12:50 AM
Yes you can. The command line input box is usually located at the bottom of the console tab and you can enter commands there

optimizer123
10-31-2012, 02:02 AM
That doesnt do anything o.O What should it do?

rnd me
10-31-2012, 06:24 AM
Which browser/version are you using? If Firefox, did you install the Firebug add-on?

With F12 you can open the developer tools in each browser, go to the Console tab and enter this line into the console command line and press enter (while still being on the reservation page):


console.log(window.localStorage.seats);

You should see a dump of an array like [0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,0..........]

impossible; localStorage only stores strings, not objects like Arrays.

If the code works, you should see a quoted CSV ("0,0,0..."), not array brackets.



fortunately, it's easy to turn objects into strings and back: JSON.

save:

window.localStorage.seats = JSON.stringify( theArray );


load:

console.log( JSON.parse( window.localStorage.seats ) );

this also keeps numbers as numbers and escapes any weirdo chars that might screw up a string building/splitting routine. and it's faster than any hand-written parser can be.


EDIT:
here is shim i find useful for storing and fetching Objects and Arrays:



var store={
set: function(key, value){ return localStorage[key]=JSON.stringify(value);},
get: function(key){return JSON.parse(localStorage[key]) },
list: Object.keys.bind(Object, localStorage)
};

devnull69
10-31-2012, 09:08 AM
Absolutely correct. I didn't use localStorage a lot so I didn't realize this fact.

Nevertheless you should be able to see the string on the console of Firebug if you follow the description above (and Console is active ... right click on the Firebug icon and select "Enable All Panels). If you follow rnd me's hint you will see it as "[0,0,0,1,1,0,0,1,0,....]" instead of "0,0,0,1,1,0,0,1,0,...."

optimizer123
10-31-2012, 11:25 AM
So i replace:


if(window.localStorage) window.localStorage.seats = theArray;

with:


window.localStorage.seats = JSON.stringify( theArray );

But what Do i replace with this code?


var store={
set: function(key, value){ return localStorage[key]=JSON.stringify(value);},
get: function(key){return JSON.parse(localStorage[key]) },
list: Object.keys.bind(Object, localStorage)
};

dont rlly know how that one shud be implemented!

devnull69
10-31-2012, 11:54 AM
You EITHER use window.localStorage.seats = JSON.stringify(theArray) OR store.set("seats", theArray) together with rnd me's shim object.

optimizer123
10-31-2012, 01:39 PM
lol dev can i pay you lol it just wont work im a first timer tho

devnull69
10-31-2012, 02:10 PM
Please send me a PM and we will see. As there is a public holiday tomorrow in Germany, I might not be able to respond before Friday, though.

optimizer123
10-31-2012, 03:23 PM
sent!!

optimizer123
10-31-2012, 05:42 PM
where do i put this code?


var store={
set: function(key, value){ return localStorage[key]=JSON.stringify(value);},
get: function(key){return JSON.parse(localStorage[key]) },
list: Object.keys.bind(Object, localStorage)
};



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum