Jump to content
vmars316

Using localStorage

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.
Please see my initial Post .Thanks...vmars316

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites
Does that mean that Chrome installed SQLite onto my computer ?
SQLite is built into Chrome, it's not a third-party installation. I believe Chrome also uses SQLite to implement the web database specification.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
SQLite is built into Chrome, it's not a third-party installation. I believe Chrome also uses SQLite to implement the web database specification.
Thanks..vm

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Ah , Thank you...vm

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...