How to append to HTML5 localStorage?

Question

I do a

localStorage.setItem('oldData', $i("textbox").value);

to set the value of key oldData to the value in a textbox.

The next time something is entered to the textbox, I want to append to the already existing oldData.

So, if I enter apples and then oranges in my textbox, my localStorage key oldData should look like this:

Initially:

Key      |   Value
---------------------------
oldData  |  apples

Now:

oldData  |  apples oranges

How can I append? Is there an append method provided?

Or do I need to read the data first, append in javascript and then write back?

You can retrieve the curent value of the key and then add the new value... — XCS, Oct 06 '11 at 20:23
@Cristy: So there is no append provided with localStorage API? — Lazer, Oct 06 '11 at 20:25
I don't know, never used it, but this could work until someone posts an "append" method :) — XCS, Oct 06 '11 at 20:26

score 22 · Accepted Answer · answered Oct 06 '11 at 20:32

22

There's no append function. It's not hard to write one though:

function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}

appendToStorage('oldData', $i("textbox").value);

Note: It makes more sense to define a function append on the localStorage object. However, because localStorage has a setter, this is not possible. If you were trying to define a function using localStorage.append = ..., the localStorage object will interpret this attempt as "Save an object called append in the Storage object".

answered Oct 06 '11 at 20:32

Rob W

341,306
83
791
678

I think I have spotted an error here, I am not sure what the OP was wanting to write to the localStorage, but since you need to use JSON syntax, make sure you are **properly seperating** your objects, arrays, etc. `localStorage.setItem(name, old + data);` with a simple `+` concatenation might trick you. – Kovács Imre Jun 23 '14 at 13:17
@KovácsImre `localStorage` only stores strings, which is exactly what the OP wanted, so `localStorage.setItem(name, old + data);` is correct. If you want to store non-strings, then you need a custom (de)serialization method. JSON syntax is a convenient way to implement this, but by no means required. – Rob W Jun 23 '14 at 13:22
In that case, it's true. – Kovács Imre Jun 23 '14 at 13:32
@RobW I have saved it. – Language Lassi Jun 24 '15 at 09:40
can you explain why they call it html5 storage ? this isn't a feature of browsers? – Ali Abbaszade Nov 05 '19 at 07:08

Nery Jr · Answer 2 · 2011-10-06T20:36:04.000

12

It is not a good solution but it works and is performative.

localStorage.setItem("fruit", "Apples"); 

localStorage.setItem("fruit", localStorage.getItem("fruit") + "Orange");

edited Oct 06 '11 at 20:36

answered Oct 06 '11 at 20:20

Nery Jr

3,849
1
26
24

Sorry. Had understood that he wanted no matter which way information storage (html date localStorage, javascript variable etc.). So the suggestion of html date, since it is recommended to the method for better performance compared to javascript variable. – Nery Jr Oct 06 '11 at 20:39

score 2 · Answer 3 · answered Oct 06 '11 at 20:29

I found this here :

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

Seems like it only has getItem,setItem,removeItem,clear,key and length.

aquawicket · Answer 4 · 2021-03-04T09:11:35.413

Technically, you could do this by assigning index numbers to the key name.
If you had a HUGE string of data to save, you could save yourself reading and writing the entire string history to the storage and just advance the index name number with the new data. Something like this.

function AppendToLocalStorageV(name, value) {
    let n = 0;
    while (localStorage.getItem(name + n)) {
        n++;
    }
    localStorage.setItem(name + n, value); //add item at first available index number
}

This would add the first available index number to the end of the key value, thereby creating a new entry. I would also keep track of the current index number to avoid reading all of the entries, or get the localStorage.length variable. The table would look like this

Then you could retrieve the key array like so.

function GetLocalStorageV(name) {
    let n = 0;
    let data = [];
    while (localStorage.getItem(name + n)) {
        data.push(localStorage.getItem(name + n++));
    }
    return data;
}

I added V to the end of the functions to distinguish that we are building vertical arrays in the storage grid.

Now we can simply do this to append and recall the data by it's name.

AppendToLocalStorageV("oldData", "apples");    
AppendToLocalStorageV("oldData", "oranges");
AppendToLocalStorageV("oldData", "bananas");
var oldData = GetLocalStorageV("oldData");  //returns an array with [apples,oranges,bananas]

You could then access your data just like an array. Get and set values at certain indexes, pop from the end of the array etc. Keep in mind, this creates a new entry every time you append. Rebuilding the index numbers could get expensive if you had to reorder the list as well. Also, I don't know how many keys you can safely generate before you slow down the browser or hit a [max_keys] limit. But at least you don't have to constantly read and write the entire list of a HUGE string of data every time as it's only writing the new data. I've never tested this with any large amounts of entries, so I'd be careful with this approach.

How to append to HTML5 localStorage?

4 Answers4

Linked