Что вы делаете неправильно:
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");
};