localStorage problem

Posted on 2014-03-21
Medium Priority
Last Modified: 2014-03-28

I have a problem with accessing the localStorage values in my HTML5 application.

I am setting the localStorage key, groups at the top of my javascript file to an object as follows...

localStorage.setItem('groups', JSON.stringify(groups));

Open in new window

Within the document.ready part of my script I attempt to retrieve the value as follows...

function ShowList() {
    var groups = JSON.parse(localStorage.getItem('groups'));

Open in new window

Inspecting the Firebug console shows, undefined for the log.  However, if I place an alert("HELLO") before groups is defined, the localStorage object is returned correctly...

function ShowList() {
    var groups = JSON.parse(localStorage.getItem('groups'));

Open in new window

I think this may be to do with the DOM lifecycle, but can't figure it out.  

Question by:nickmarshall
  • 2
LVL 13

Expert Comment

ID: 39944908
Do you have both the statements setItem and getItem in the same script file?

It might be the order in which you are using the javascript files. In general, localStorage is available in the document.ready and you may use it without any issue. Following is a simple HTML page, that uses the same code as listed by you:

<!DOCTYPE html>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script language="javascript" type="text/javascript">

        var groups = "Test localStorage";
        localStorage.setItem('groups', JSON.stringify(groups));

        $( document ).ready(function() {

        function ShowList() {
            var groups = JSON.parse(localStorage.getItem('groups'));

<body style="width:220px;">
This is HTML body.

Open in new window

NOTE: To test the above code, make sure that you correctly include the jquery file referenced in this code.

Accepted Solution

nickmarshall earned 0 total points
ID: 39949690
I was resetting the localStorage at the beginning of my script - Removing this fixed the issue.

Author Closing Comment

ID: 39961064
Fixed myself.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question