12

For example I have the following code:

  localStorage["screenshots"] = new Array();
  localStorage["screenshots"]["a"] = 9;
  alert(localStorage["screenshots"]["a"]);

  Arr = new Array();
  Arr["screenshots"] = new Array();
  Arr["screenshots"]["a"] = 9;
  alert(Arr["screenshots"]["a"]);

(I use Google Chrome v9.0.597.107 on Windows Vista 32-bit)

But only the second part works (output of alert() is "a")! The first alert outputs in contrast "undefined"!

What is the problem?

Thanks.

ComFreek
  • 29,044
  • 18
  • 104
  • 156
  • 1
    Unrelated to local storage issues, but JS has no such concept of associative arrays. When you make an array, and the add items via ["name"] syntax, you are really adding a property to that Array instance object. The array's length property does not change, nor is the array considered to have any items. What you ought to be doing is making an object if you aren't after an indexed array (the only sort of Array JS knows anything about). – JAAulde Mar 07 '11 at 15:32
  • 1
    @JAAulde: that is an **extremely** misleading statement. JavaScript has objects, created with `new Object()` or object literal syntax `{}`, which **are** [associative arrays](http://www.quirksmode.org/js/associative.html). – Matt Ball Mar 07 '11 at 16:10
  • 1
    @Matt No, they're objects. The site you link is mixing terms and is where the misleading takes place. You can treat them in the manner in which other languages treat associative arrays (string-named property accessing in square brackets) but they are NOT arrays. They do not have length properties which are maintained through manipulation, nor do they have methods associated with arrays such as push, shift, etc. JS only has one object which falls into the category of array, and that is the one constructed with Array(). It is an indexed array, not associative. – JAAulde Mar 07 '11 at 16:32
  • @JAAulde: what definition of associative array are you using? I don't see anything on, say [Wikipedia](http://en.wikipedia.org/wiki/Associative_array), that says an associative array must have a `length` property or (integer-indexed) array methods. The basic methods are, as I understand it (and Wikipedia seems to agree with me): `add`, `reassign`, `remove`, and `lookup`. See also [this article](http://en.wikipedia.org/wiki/Comparison_of_programming_languages_(mapping)#JavaScript). – Matt Ball Mar 07 '11 at 16:39
  • @Matt, There are, admittedly, some semantics issues here. In computer science terms you're right that JS implements assoc arrays in the hash table mechanism used for its objects. I am talking JS specifics, though. Despite the fact that under the hood there are assoc arrays in use, JS doesn't make such a construct available to the developer by such a name. JS provides Objects, a subclass of which is an array ( Array() ). In JS when you use an Array it is because you need behavior such as I mentioned earlier. My first comment stemmed from what I believe is a misuse of that construct – JAAulde Mar 07 '11 at 16:55
  • @JAAlude: I don't know what the correct definition of "associative arrays" is, but the fact that JavaScript doesn't use that name isn't a compelling counterargument. Python's `dict`s are certainly hash maps, even if they never use that name. – Jeremy Mar 07 '11 at 23:56

3 Answers3

16

localStorage stores values as strings, so you need to JSON serialize your objects on the way in and deserialize them on the way out. For example:

var data = {'A': 9};

localStorage['screenshots'] = JSON.stringify(data);

// Later/elsewhere:

var data = JSON.parse(localStorage['screenshots']);

// 9
console.log(data.A);
Dave Ward
  • 59,815
  • 13
  • 117
  • 134
  • 1
    Be aware that the JSON object is not yet available by default in all browsers and so a library such as [json2.js](https://github.com/douglascrockford/JSON-js/raw/master/json2.js) is required if you your code to work everywhere. – Jeremy Mar 07 '11 at 16:28
  • 5
    It's available in all the browsers that implement HTML5 localStorage. – Dave Ward Mar 07 '11 at 17:36
2

The localStorage object can only store strings. To store other types of data, use must convert them to strings, and convert them back on retrieval. In most cases you would want to use JSON to do this.

Jeremy
  • 1
  • 85
  • 340
  • 366
1

Local storage only stores string keys and string values.

The DOM Storage mechanism is a means through which string key/value pairs can be securely stored and later retrieved for use.

Source: MDC.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710