Jump to content

Using localStorage

vmars316

By vmars316
in JavaScript

 Share

Recommended Posts

vmars316 Member

vmars316

Posted
Posted

Hello & Thanks ,I would like to write a myDiary script . But I am having trouble with the concept of KEY . Normally , when I think of a KEY , as applied to data ,I think of it as an Index pointing to something . Givens :TodaysDate="2013.01.27" .And "myDiary_" is a constant .Then of course there is a TextArea1 full of text . I would like to Create a Key for localStorage ,consisting of ( "myDiary_" + TodaysDate) . [ myDiary_2013.01.27 ]How would I do that with localStorage :localStorage.key=( "myDiary_" + TodaysDate) I plan to run script like this :Each time the user clicks on [New Entry Button] .script checks if there is an entry for ("myDiary_" + TodaysDate) .If ("myDiary_" + TodaysDate) is there , script loads data into Textarea1 Eventually user will click on [save/Update Button] .And new data is added to ("myDiary_" + TodaysDate) . I also notice that for every entry in :C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Local Storage There are two files , for example :First the -journal : https_plus.google.com_0.localstorage-journalThen this : https_plus.google.com_0.localstorage ? What is the difference between the two ?and? How to create a multi-part KEY ? Thanks...Vernon

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

This interested me so I played around. Local storage will only accept a string as data. So you need to be able to create a string of key-val pairs that you can parse. JSON is the perfect solution. Here's some code that shows a basic implementation. 

<!DOCTYPE html><html>    <head>        <meta http-equiv="content-type" content="text/html;charset=UTF-8">        <title></title>        <script type="text/javascript">            function init () {                document.getElementById("button1").onclick = function () {                    var obj = new Object;                    obj.key = "val";                    localStorage.test = JSON.stringify(obj);                }                document.getElementById("button2").onclick = function () {                    var newObj = JSON.parse(localStorage.test);                    alert(newObj.key);                }            }            window.onload = init;        </script>    </head>    <body>        <div>            <input type="button" value="Set" id="button1">            <input type="button" value="Alert" id="button2">        </div>    </body></html>

Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted

When I use your code , it creates the following 2 files :__0.localstorage__0.localstorage-journal When I substitute your line : localStorage.test = JSON.stringify(obj);with mine : localStorage.setItem('myKey', 'myData');the code creates the following 2 files : https_plus.google.com_0.localstoragehttps_plus.google.com_0.localstorage-journal I was expecting the files created with my code to be named :myKey.localstoragemyKey.localstorage-journalWhy aren't they ? Like I said , I need to understand what KEY means ,& where does KEY show up ?Also, which file contains the KEY ?Also, which file contains the DATA ? See code below :THanks...Vernon <!DOCTYPE html><!--__0.localstorage__0.localstorage-journal--><html><title>~~~localStorage-01.html</title> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <script type="text/javascript"> function init () { document.getElementById("button1").onclick = function () { var obj = new Object; obj.key = "val";' localStorage.test = JSON.stringify(obj); localStorage.setItem('myKey', 'myData'); } document.getElementById("button2").onclick = function () { var newObj = JSON.parse(localStorage.test); alert(newObj.key); } } window.onload = init; </script> </head> <body> <div> <input type="button" value="Set" id="button1"> <input type="button" value="Alert" id="button2"> </div> </body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I don't know why you are interested in files. As far as I know, the W3C doesn't have a specification for implementing localStorage. Every browser will do it differently, and a single browser might do it differently on different platforms. Expecting certain filenames to be created seems like a waste of time. Maybe you should explain your goals more clearly. It's possible that what you want cannot really be done, or can be done using other tools, but I am not certain.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted
I was expecting the files created with my code to be named :myKey.localstoragemyKey.localstorage-journalWhy aren't they ?
Why does it matter what the browser names the files? The spec for local storage does not set rules for how a browser actually needs to store the data, there's no requirement to name the files a certain way. You're expecting the browser to make one file per key/value pair, it would make more sense if it made one file per website and stored all data for that site in that file. That's what Chrome does.
Like I said , I need to understand what KEY means
The key is the name of the data, like a variable name or cookie name. It is how you refer to the data when you're asking the browser to save or retrieve it.
& where does KEY show up ?Also, which file contains the KEY ?Also, which file contains the DATA ?
Why does any of that matter? You can use localStorage.getItem('myKey') to get the data, that's how you use the key. Where and how the keys and data actually get stored by any arbitrary browser really isn't relevant. For Chrome specifically, the files it saves are SQLite files that it can use with the SQLite database program. Again, that's not part of the localStorage spec, it's just how Google chose to implement it. If you want to know why they made that choice then you need to ask the engineers who designed it. If you want to learn about the SQLite file format, here it is: http://www.sqlite.org/fileformat.html
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

If it helps, both of these create the same result

localStorage.setItem('myKey', 'myData');localStorage.myKey = 'myData';

In each case, you can think of "myKey" as the key that points to the string "myData." I'm not sure what you mean by "a multi-part KEY." That's what I thought I was showing you when I mentioned JSON, but perhaps it's not.

Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted

Thanks :

Why does it matter what the browser names the files?
It matters because I am trying to learn about the Beast called localStorage ."Why does it matter what the browser names the files?"Oh , that's new information to me "the browser names the files" ...Thanks And I also learned that :The browser (in my case Chrome Version 24.0.1312.52 m ) names the files according to what is the current/active site .For example when I issue a 'localStorage command' from here :http://www.w3schools...me=tryjs_eventsThe browser names the files : http_www.w3schools.com_0.localstorage http_www.w3schools.com_0.localstorage-journal and here : https_plus.google.com_0.localstorage https_plus.google.com_0.localstorage-journal and for my desktop : __0.localstorage __0.localstorage-journal etc..
The key is the name of the data, like a variable name or cookie name. It is how you refer to the data when you're asking the browser to save or retrieve it.
Thanks
You can use localStorage.getItem('myKey') to get the data, that's how you use the key.
Thanks
Where and how the keys and data actually get stored by any arbitrary browser really isn't relevant.
It matters to me , because I would like to go thru the "Local storage" Folderand delete everything out there .
For Chrome specifically, the files it saves are SQLite files
Yes , I noticed that . I was wondering why at the beginnning of each file it reads "SQLite format 3" .Does that mean that Chrome installed SQLite onto my computer ?
Thanks , after I get localStorage working , I will check it out . Thanks again...Vernon BTW : Deirdre's DadI wasn't being sarcastic : sometimes I get lost in a conversation , and forget what was said before .
Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted (edited)
If it helps, both of these create the same result 
localStorage.setItem('myKey', 'myData');localStorage.myKey = 'myData';

I see . Thanks . This one thru me :
localStorage.myKey = 'myData';

Because myKey wasn't defined anywhere , and it seemed that since it is used as a literal , it should read localStorage."myKey" .That's an unexpected syntax for me . 

I'm not sure what you mean by "a multi-part KEY." That's what I thought I was showing you when I mentioned JSON, but perhaps it's not.

By "multi-part KEY" I mean , the KEY is composed of ( "myDiary_" + TodaysDate ) , so KEY would look like : [myDiary_2013.01.28] . So , in my code , when user does a Click on [OpenToday'sPage] Button , I would check if there is already a 'Page for Today' .If there is , then code would load DATA into Textarea1 . If not , then an alert might say "This is Today's Page , Please enter your data. " . ...vm

Edited by vmars316
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted (edited)

localStorage.myKey is just normal object syntax for JavaScript. It was the standard before we had methods like setItem and setAttribute. In Firefox, at least, it also works if you write localStorage['myKey'], whch is also normal object/array syntax. ("myDiary_" + TodaysDate) should work. To see if there is already data there, try something like this: 

var data = localStorage.getItem("myDiary_" + TodaysDate);

If that key hasn't been defined, the getItem method should return "undefined" (Firefox does this) or something else that evaluates to false. It should not throw an error.

Edited by Deirdre's Dad
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

There may be some confusion regarding Javascript's object/array syntax. You can store your key name in a variable like this: var myKey = "myDiary_"+TodaysDate; But doing this will not work: localStorage.myKey That will look for the key "myKey", not the value of that variable. Either of these will work correctly though: localStorage[myKey]localStorage.getItem(myKey)

  • Like 1
Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted (edited)
There may be some confusion regarding Javascript's object/array syntax. You can store your key name in a variable like this: var myKey = "myDiary_"+TodaysDate; But doing this will not work: localStorage.myKey That will look for the key "myKey", not the value of that variable. Either of these will work correctly though: localStorage[myKey]localStorage.getItem(myKey)
THanksSomething is wrong with my onClick , or maybe my Functions_structure , I get no Alert . <!DOCTYPE html><!--__0.localstorage__0.localstorage-journal--><html><title>~~~localStorage-03.html</title> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <script type="text/javascript"> window.onload = function init () { var TodaysDate = "01/29/13" var myKey = "myDiary_"+TodaysDate; alert("Hello , Today's Date is " + TodaysDate); } </script> <script type="text/javascript"> // localStorage.test = JSON.stringify(obj); // localStorage.setItem('myKey', 'myData'); function GetTodaysPage () { document.getElementById("GetTodaysPage").onclick = function () { alert("Hello , from GetTodaysPage " + TodaysDate); TodaysPage = localStorage.getItem[myKey]; } <!--End of function GetTodaysPage--> function SaveTodaysPage () { document.getElementById("SaveTodaysPage").onclick = function () { alert("Hello , from SaveTodaysPage " + TodaysDate); localStorage.setItem[[myKey] , TodaysPage]; } </script> <!--End of function SaveTodaysPage--> </head> <body> <div> <input type="button" value="GetToday'sPage" id="GetTodaysPage"> <input type="button" value="SaveToday'sPage" id="SaveTodaysPage"> </div> <div> <textarea id="TodaysPage" cols="80" rows="80"> </textarea> </div> </body></html> Thanks..vm Edited by vmars316
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Remove the function name "init" from the onload declaration. You should see error messages on your error console, you can check my signature for links about error consoles or in Chrome you can press Ctrl-Shift-I, and then click on the Console tab.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...