Как добавить элемент в локальное хранилище

Я создаю приложение с книжной записью с кнопкой «Добавить в избранное». У меня есть song1.html song2.html и favorite.html.

в song1.html, при нажатии кнопки «Избранное». Я сохраняю ссылку на эту песню в локальном хранилище.

Это мой 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>

в song2.html, при нажатии кнопки «Избранное». Я сохраняю ссылку на вторую песню в локальном хранилище.

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>

теперь у меня есть favorite.html для перечисления моих любимых песен. и favourite.html будет извлекать ссылки, которые хранятся в локальном хранилище.

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>

Теперь я хочу показать как песню 1, так и песню 2 в файле favorite.html. но в файле favourite.html отображается только песня 2. Как это сделать.

javascript,html,local-storage,

1

Ответов: 6


1 принят

Если вам действительно нужно добавить данные в тот же <! DOCTYPE html> <html> <body> <div id = "result" > </ div> <script> // Проверить поддержку браузера if ( typeof ( Storage ) ! == "undefined" ) { // Хранить localStorage . setItem ( "list" , "<h1> John <h1>" ); appendToStorage ( "list" , "<h2> David <h2>" ); // Получить документ . getElementById ( "результат" ). innerHTML = localStorage . getItem ( «список» ); } else { document . getElementById ( "результат" ). innerHTML = «К сожалению, ваш браузер не поддерживает веб-хранилище ...» ; } function appendToStorage ( имя , данные ) { var old = localStorage . getItem ( имя ); if ( old === null ) old = "" ; localStorage . setItem ( имя , старый + данные ); } </ script> </ body> </ html> , нет встроенной функции добавления.

Однако вы можете использовать пользовательскую функцию, например, предложенную в этом ответе: https://stackoverflow.com/a/7680123/2446264 и получить следующий код для выполнения того, что вы хотите:

<!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>


Хранить список в массиве javascript. Вам нужно либо использовать разные ключи, либо хранить несколько строк в массиве, а затем localStorage.stringify для сохранения в localStorage. Similary, когда вы получаете одну и ту же строку из JSON, затем преобразуйте ее в объект с помощью JSON.parse.

localStorage


3

При использовании JSON.stringify()вы можете иметь только один элемент за ключ. JSON.parse()позволяет хранить данные строки в качестве значения, поэтому мы можем использовать JSON.

Вы можете сериализовать массив элементов, которые хотите добавить, а затем добавить их к ключу внутри localStorage.

Рекомендации:


JSFiddle . StackOverflow не позволяет, localStorageпоэтому я размещал там свой код.

Код:


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));

Код [Для тех, кто любит инкапсуляцию]:


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;
});

2

В принципе, вам нужно будет сохранить эти данные в виде списка строк (или использовать разные ключи «list1», «list2» и т. Д.).

Поэтому, когда вы сначала ставите свою ценность в локальное хранилище, вам нужно сделать что-то вроде этого:

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));

Затем вы можете добавить это значение, перейдя по списку.

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

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

1

Что вы делаете неправильно:

localstorage не сохраняет типы данных, а сохраняет строку. Например, если вы должны были хранить целое число в свойстве localstorage, тип данных всегда возвращался в виде строки.

Поскольку вы пытаетесь сохранить массив значений, вам нужно будет создать метод CSV (Comma Sepperated Values).

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

Вы можете проанализировать это в локальном хранилище, используя один из двух методов

  • JSON (см. Пример ниже)
  • SPLIT (variable.split (",");

Важно, чтобы вы знали, что браузеры ограничивают 5 МБ данных, распределенных между LocalStorage и SessionStorage.

Это может вызвать проблемы, когда необходимо хранить большой объем данных в случае вашего отредактированного примера, сохраняя различные URL-адреса

Что может быть альтернативой вашему решению, было бы создание CSV любимых песен с использованием уникального идентификатора SQL-таблицы для записи таблицы песен.

Однако, если ваш код использует только языки Front End, такие как HTML и JAVASCRIPT, тогда вы можете предпочесть использовать IndexedDB

Как использовать индексированные DB

Это позволит вам создать локальную базу данных, доступную в автономном режиме, и позволяет вам запоминать и редактировать значения, такие как

Пример LocalStorage:

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>

Индексированный пример БД

 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");
  };

JavaScript, HTML, локальное хранение,
Похожие вопросы