In the previous recipe, we took a look at how to use the Local Storage functionality in your website. There will be instances where you might want to examine the raw information being stored in your browser—we'll take a look at how to do this within this task.
For this task, you will need at least one modern browser—this can be IE, Chrome, Safari, or Firefox. The version must be a recent one, from within the last two years. For IE users, you will also need access to a working local web server, such as WAMP Server (for PC) or MAMP for Macs. Linux users will likely have one installed, or available to install within the distribution.
Also, if you are using Firefox, you will need to avail yourself of a copy of Firebug, which you can get from https://addons.mozilla.org/en-US/firefox/addon/firebug/.
In this recipe, it is assumed that you have all four browsers installed (including a local web server for IE). You'll see how to view the raw data within each browser.
To view the content of Local Storage in a browser, perform the following steps:
- Let's start by installing the Firebug plug-in. Visit https://addons.mozilla.org/en-US/firefox/addon/firebug/ and click on the Add to Firefox button. If prompted, click on Yes to allow Mozilla to install the plug-in:
- The plug-in will download and prompt you to install it:
- We don't need to restart Firefox to complete the installation for Firebug, so you will now be able to view the elements stored in Local Storage. The raw content is stored in the
webappsstore.sqlitefile within theprofilefolder. You can't edit it manually there, but can do so by pressing F12 in Firefox to bring up Firebug. Click on DOM and then Show DOM Properties to show the values being stored in the Local Storage database:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
- Let's focus our attention now on Chrome. The support for viewing the Local Storage content is already built-in by default, so go ahead and fire up Chrome. Then, right-click anywhere on the page and select Inspect Element to bring up the Developer toolbar. Select Resources to view the content. You will see an entry for Local Storage (which has two values showing, in this example):
- Next in our list of browsers is Safari. This works in the same manner, so go ahead and open up your copy of Safari, right-click anywhere on the page, and select Inspect Element. Then, click on the Resources tab to see the Local Storage entries:
- Last, but by no means least, is Internet Explorer. This is a little more involved, so save a copy of your demo file within your web server's
wwwfolder on your PC. Ensure your web server is started. Then, open up Internet Explorer and browse to that file from within your web server. - In IE, press F12 to bring up the Developer toolbar and then switch to the Script tab:
- Click on Click to add, then enter
localStorage, and press Enter. Note that this is case sensitive! You will see the contents oflocalStorage:
Note
You may prefer to use one of the tools available to view the localStorage contents in IE. Have a look at Foundstone HTML5 Local Storage Explorer 1.1, which is available as an add-in from https://addons.mozilla.org/en-US/firefox/addon/foundstone-html5-local-storage/.
In this recipe, we looked at the raw information that the browser holds, when asked to store content within its localStorage area. While the means to view it might differ from browser to browser, the principles are still the same. Each browser will reference the contents of the localStorage area on your client PC in similar ways. This content is stored at various locations:
- In IE 8 or higher, content is stored as an XML file in
%userprofiles%/Local Settings/Application Data/Microsoft/Internet Explorer/DOMStore. - For Firefox users, data is stored in the
webappsstore.sqlitefile in theprofilefolder and you can also get hold of some add-ons to view the contents. - If you're using Chrome, this is a little more involved, depending on the operating system being used, for example, in Windows XP, the content is stored in
C:Documents and Settings\%username%Local Settings\%Application Data%GoogleChromeUser DataDefault.If you are using Vista or Windows 7, it's in
C:Users\%username%\%AppData%LocalGoogleChromeUser DataDefault. - Last, but not least, content for Safari is stored in the
sqllitefile inC:Users\%username%AppDataLocalApple ComputerSafariLocalStorage. There's a Local Storage file named the same as the website storing it.
If you want to get really down and dirty in your browser, you can use the console application that comes as part of each browser. It is possible to get and set values into Local or Session Storage, using the command line, in much the same way that you would do using something like JavaScript. The beauty of this is that it doesn't need any additional plugins—the exception being IE, which needs its Developer toolbar, but this is included by default anyway!
As an example, here's how you would do this if you were using Firefox. Navigate to the domain in question and open Firefox's console (Ctrl + Shift + K in Windows). You can then enter any of the following actions as shown in the examples:
- Set a value:
localStorage.foo = "bar"or uselocalStorage.setItem ("foo", "bar") - Change a value:
localStorage.setItem ("foo", "all day")or uselocalStorage.foo = "all day" - Delete a value:
localStorage.removeItem ("foo")
This is not the easiest way to do it, but it still works, just in case you need it.
We're going to move on and look at the second type of storage available, which is Session Storage. Although it is similar to Local Storage, there are some noticeable differences, as you will see in the next recipe.