Question

如何将商品添加到本地存储

2018-07-12

21545

javascript html local-storage

我正在创建一个带有“添加到收藏夹”按钮的歌曲簿应用程序。我有 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 来列出我最喜欢的歌曲。而 favorite.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>

现在我想在 favorite.html 中显示歌曲 1 和歌曲 2。但 favorite.html 中只显示歌曲 2。如何实现这一点。

Answer 1

将列表存储在 javascript 数组中。您需要使用不同的键或在数组中存储多个字符串，然后 JSON.stringify 将其保存在 localStorage 中。类似地，当您从 localStorage 获取相同的字符串时，请使用 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>

Answer 2

使用 localStorage 时，每个键只能有一个项目。 localStorage 允许您将字符串数据存储为值，因此我们可以使用 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;
});

Answer 3

如果您确实需要将数据附加到同一个 LocalStorage 键，则没有内置的附加函数。

但是，您可以使用自定义函数，例如此答案中提出的函数： https://stackoverflow.com/a/7680123/2446264 ，并获取以下代码来执行您想要的操作：

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