{"id":1615,"date":"2016-06-16T17:32:18","date_gmt":"2016-06-17T00:32:18","guid":{"rendered":"http:\/\/10kdev.net\/?p=1615"},"modified":"2016-06-16T12:44:37","modified_gmt":"2016-06-16T19:44:37","slug":"tooling-for-localstorage","status":"publish","type":"post","link":"http:\/\/10kdev.net\/?p=1615","title":{"rendered":"Tooling for localstorage"},"content":{"rendered":"

Localstorage<\/strong> is a newer way to store data locally in a browser, kind of like a cookie.\u00a0 It is supposed to have a much easier interface than cookies and can do JSON.\u00a0 Another developer I know was using this and she was using localstorage to track local data\u00a0 for some dynamic web interactions.\u00a0 Nothing will get sent back to the server — you’d still have to use cookies for that (example – a JSESSIONID).\u00a0 But considering that much of the javascript I’ve written in my life was managing browser data by doing “single page websites” or passing form data with hidden fields back and forth, or passing data via query parameters — the localstorage idea is very compelling.<\/p>\n

I did a little searching and this succinct post on HTML Dog has a nice example<\/a>.<\/p>\n

M<\/strong>y interest for this post is in the tooling around localstorage<\/strong>.<\/p>\n

What I want to do is create a localstorage entry and then see it in a tool like Firebug or a web development tool much like a cookie.\u00a0 I’ve chosen Firefox built in web developer tools for now.<\/p>\n

First, I have to create some localstorage.\u00a0 I navigate to this blog site and open up Firefox’s\u00a0 developer and toggle the toolbar<\/p>\n

\"Screen<\/a><\/p>\n

Click on the Toolbox Options and then check Storage.<\/p>\n

\"Screen<\/a><\/p>\n

Create a localstorage value, I’ll just use HTML Dog’s JSON Example, and include a println to show I can try out the setter\/getter functionality.<\/p>\n

localStorage.setItem('user', JSON.stringify({\r\n\u00a0\u00a0\u00a0 username: 'htmldog',\r\n\u00a0\u00a0\u00a0 api_key: 'abc123xyz789'\r\n}));\r\nvar user = JSON.parse(localStorage.getItem('user'));\r\nprint(JSON.stringify(user));\r\n<\/code><\/pre>\n
Execute it in the console of the developer’s tool.<\/p>\n
\"Screen<\/a>And after.<\/p>\n
\"Screen<\/a>We received the data back correctly for “user” object . . .<\/p>\n
“{“username”:”htmldog”,”api_key”:”abc123xyz789″}”<\/p>\n
Look in Storage.\u00a0 Wow!\u00a0 that’s a lot of cookies.<\/p>\n
\"Screen<\/a><\/p>\n
And here is the localstorage data for “user”:<\/p>\n
\"Screen<\/a>You probably see the other two storage entries:<\/p>\n