如何附加到 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?

Answer 1

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

Answer 2

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

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

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

Answer 3

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.

Answer 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.

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.