How to add item to local storage

javascript html local-storage

14,397

Solution 1

If you really need to append data to the same LocalStorage key, there is no built-in append function.

However, you can use a custom function, for instance the one proposed in this answer: https://stackoverflow.com/a/7680123/2446264, and get the following code to do what you want:

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("list", "<h1>John<h1>");
    appendToStorage("list", "<h2>David<h2>");

    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("list");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

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

</body>
</html>

Solution 2

Store list in javascript Array. You need to either use different keys or store multiple strings in array and then JSON.stringify that to save in localStorage. Similary when you get the same string from localStorage then convert it into object using JSON.parse.

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    let list = [];
    list.push("<h1>John<h1>");
    list.push("<h2>David<h2>");
    localStorage.setItem("list", JSON.stringify(list));      
  

    // Retrieve
    document.getElementById("result").innerHTML = JSON.parse(localStorage.getItem("list"));
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

Solution 3

When using localStorage, you can only have one item per key. localStorage allows you to store string-data as the value, thus we can use JSON.

You can serialize an array of items you want to add and then append them to the key inside of localStorage.

References:

JSFiddle. StackOverflow doesn't allow localStorage so I hosted my code there.

Code:

let items = ['<h1>John<h1>', '<h2>David<h2>', '<h3>Mary<h3>', '<h4>Bob<h4>'];

// Stringify the array and store it
localStorage.setItem("list", JSON.stringify(items));

// Parse the stringified array back from localStorage
let itemsRetrieved = JSON.parse(localStorage.getItem('list'));

// Get div with .list class
let div = document.querySelector('.list');

// Iterate retrieved array and append items
itemsRetrieved.forEach(item => {
    div.innerHTML += item;
});

// Add an item
itemsRetrieved.push('<span style="color: red;">Dylan</span>');

// Stringify the new array and overwrite the key
localStorage.setItem("list", JSON.stringify(itemsRetrieved));

Code [For those who love encapsulation]:

let items = ['<h1>John<h1>', '<h2>David<h2>', '<h3>Mary<h3>', '<h4>Bob<h4>'];

// Stringify the array and store it [Initial]
localStorage.setItem("list", JSON.stringify(items));

// Returns parsed array
function getData(key) {
    return JSON.parse(localStorage.getItem(key));
}

// Returns new array
function addData(key, item) {
    // Get current array
    let currentData = getData(key);

    // Add an item
    currentData.push(item);

    // Stringify the new array and overwrite the key
    localStorage.setItem(key, JSON.stringify(currentData));

    return currentData;
}

// Parse the stringified array back from localStorage
let itemsRetrieved = getData('list');

// Get div with .list class
let div = document.querySelector('.list');

// Add an item
itemsRetrieved = addData('list', '<span style="color: red;">Dylan</span>');

// Iterate retrieved array and append items
itemsRetrieved.forEach(item => {
    div.innerHTML += item;
});

Solution 4

Basically, you'll need to store those data as a list of strings (or use different keys 'list1', 'list2' etc...).

So, when you are putting your value into the local storage initially, you'll need to do something like this:

var initialValue = ['<h1>John<h1>']; // array of strings
// since Local Storage accepts only string values, 
// you can store an array or any other object by using JSON.stringify function
localStorage.setItem('list', JSON.stringify(initialValue);

// updating local storage
var list = JSON.parse(localStorage.getItem('list');
list.push('<h2>David<h2>');
localStorage.setItem('list', JSON.stringify(list));

Then you can append those value by looping through the list.

var output = '';
for (var i = 0; i < list.length; i++) {
  output = output + list[i];
}

document.getElementById("result").innerHTML = output;

Solution 5

What you are doing wrong:

localstorage doesn't store data types, but rather stores a string.

For instance, if you was to store an integer in a localstorage property, the data type would always be returned as a string.

Since you are attempting to store an array of values, you will need to create a CSV (comma-separated values) method.

var strLocalStorage = "John, Peter, Fred, Paul, Mary, Elizabeth";

You can the parse this into local storage using one of two methods

JSON (See example beneath)
SPLIT (variable.split(", ");

It is important you should be aware, Browsers set limitations of 5MB of data allocated between LocalStorage and SessionStorage.

This can cause problems when a large amount of data needs to be stored, in the event of your edited example, storing various URLs

What may be an alternative to your solution, would be to create CSV of favourite songs using your SQL Table's unique ID for the song table entry.

However, in the event your code is only using Front End languages such as HTML and JAVASCRIPT, then you may prefer to use IndexedDB

How to use Indexed DBs

This will allow you to create a local database that is accessible offline and allows you to recall and edit the values easier such as

LocalStorage Example:

var blLocalStorage = false;

function funInitiate(){
  if (typeof(Storage) !== "undefined") {
    console.log("localstorage detected on this browser");
    blLocalStorage = true;
  }else{
    console.log("local storage is not supported by this browser, please update");
  }
}

function funTestLocalStorage(){
  var strLocalStorage = localStorage.getItem("FavSongs");
  if(strLocalStorage === null){
    return false;
  }else{
    return true;
  }
}

function funGetSongFavorites(){
  if(blLocalStorage){
    if (funTestLocalStorage()){
      var arrLocalStorage = JSON.parse(localStorage.getItem("FavSongs"));
      var elOutput = document.querySelector("#result");
      for(i = 0; i < arrLocalStorage.length; i++){
        elOutput.innerHTML += "<br>" + arrLocalStorage[i]
      }
    }
  }else{
    console.log("No local storage - function funGetSongFavourites aborted");
  }
}

function funAddFav(strURL){
  if(blLocalStorage){
    var strLocalStorage = localStorage.getItem(strURL);
    if(strLocalStorage === null){
      localStorage.setItem("FavSongs", strURL);
    }else{
      var arrList = JSON.parse(localStorage.getItem('FavSongs'));
      arrList.push(strURL);
    }
    localStorage.setItem('FavSong', JSON.stringify(arrList));
    console.log("Favourite Lists update: " + strURL);
  }else{
    console.log("No local storage - Function funAddFav aborted");
  }
}

document.addEventListener("DOMContentLoaded", funInitiate, false);

<!DOCTYPE html>
<html>
    <head>
      <title>Webpage Title</title>
      <script src="pathToJSScriptShownBeneath"></script>
    </head>
    <body>
        <button onclick="funAddFav('http://youtube.com')">
           Add to favorite
        </button>
        <div id="result"></div>
    </body>
</html>

Indexed DB example

 var songList = [
  { id: 1, artist: "2pac", title: "Dear Mama", URL: "https://www.youtube.com/watch?v=Mb1ZvUDvLDY" },
  { id: 2, artist: "Biggie Smalls", title: "Hypnotize", URL: "https://www.youtube.com/watch?v=glEiPXAYE-U" }
];

const dbName = "favSongs";
var request = indexedDB.open(dbName, songList.length);

request.onerror = function(event) {
  console.log("An Error has occured, script will now exist";
  return;
};

request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("SongList", { keyPath: "id" });
  // There can be multiple songs by 1 artist or band therefore this will
  // declare this as a false unique entry, the sample applies for song titles
  // some songs have the same title but performed by different artists.
  objectStore.createIndex("artist", "artist", { unique: false });
  
  objectStore.createIndex("title", "title", { unique: false });
  // Song URLs will be unique, so we set this as a individually unique
  objectStore.createIndex("URL", "URL", { unique: true });

  // Use transaction oncomplete to make sure the objectStore creation is 
  // finished before adding data into it.
  objectStore.transaction.oncomplete = function(event) {
    // Store values in the newly created objectStore.
    var customerObjectStore = db.transaction("favSongs", "readwrite").objectStore("SongList");
    customerData.forEach(function(songList) {
      customerObjectStore.add(songList);
    });
  };
};

// Retrieving Data:
var transaction = db.transaction(["favSongs"]);
var objectStore = transaction.objectStore("SongList");
var request = objectStore.get(2);
request.onerror = function(event) {
  console.log("Entry doesnt exist of has been deleted");
};

request.onsuccess = function(event) {
  var strArtist = request.result.artist;
  var strTitle = request.result.title;
  var strURL = request.result.URL;
};

// Deleting Data
var request = db.transaction(["favSongs"], "readwrite")
                .objectStore("SongList")
                .delete(1);
  request.onsuccess = function(event) {
    console.log ("Entry 1 has been deleted");
  };

View more solutions

14,397

Author by

john livingston

Updated on June 14, 2022

Comments

john livingston almost 2 years
I am creating a song book app with 'add to favorite' button. i have song1.html song2.html and favorite.html.

in song1.html, when add to favorite button is clicked. i am storing the link to that song in local storage.

This is my song1.html
```
<!DOCTYPE html>
<html>
<body>



<button onclick="mySongOne()">add to favorite</button>





<script>
function mySongOne() {
  localStorage.setItem("favsong", "<a href='https://www.song1.com'><h1>song1</h1></a>");
}


</script>

</body>
</html>
```
in song2.html, when add to favorite button is clicked. i am storing the link of the second song in local storage.

song2.html
```
<!DOCTYPE html>
<html>
<body>



<button onclick="mySongTwo()">add to favorite</button>



<script>
function mySongTwo() {
  localStorage.setItem("favsong", "<a href='https://song2.com'><h1>song2</h1></a>");
}


</script>

</body>
</html>
```
now i have a favorite.html for listing my favourite songs. and favourite.html will retrieve the links that i stored in local storage.

favorite.html
```
<!DOCTYPE html>
<html>
<body onload="myFunction()">

<div id="result"></div>



<script>
function myFunction() {
  document.getElementById("result").innerHTML = localStorage.getItem("favsong");
}

</script>

</body>
</html>
```
Now i want to show both song 1 and song 2 in favorite.html. but only song 2 is displayed in favourite.html. How to accomplish this.
- treyBake almost 6 years
  
  you're using the same key name.. what else would you expect?
- feeela almost 6 years
  
  Possible duplicate of adding new objects to localstorage
- Pete almost 6 years
  
  if you want to show them both, why not put them both in the same one localStorage.setItem("list", "<h1>John<h1><h2>David<h2>");
- Admin almost 6 years
  
  Why not just make another localstorage
DataCure almost 6 years

I like your answer and the use of JSON in your solution (voted up)
Alex almost 6 years

@johnlivingston All you have to do is to rearrange the functionality. Nothing needs to be changed.