How To Append To Html5 Localstorage?

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 t

Solution 1:

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

functionappendToStorage(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".

Solution 2:

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

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

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

Solution 3:

I found this here :

interfaceStorage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator voidsetItem(DOMString key, DOMString value);
  deleter voidremoveItem(DOMString key);
  voidclear();
};

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

Solution 4:

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.

functionAppendToLocalStorageV(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.

functionGetLocalStorageV(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 arraywith [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.