Assigning multiple values to a key value pair in JavaScript
Question
So I'm trying to make a list function using local.storage. I've managed to create one, however I need to give the key multiple values, as of current it displays the first value 3 times, however I need it to display each value applied to it. For each new item added to the list, a new key needs to be generated however I'm really struggling to do this. Please find me current code:
<html>
<head>
<title>Local Storage</title>
<style media="screen">
input, button {
padding: 7px;
height: 40px;
}
fieldset {
margin-bottom: 25px;
}
</style>
</head>
<body>
<h2 id="title">Local Storage - JS</h2>
<fieldset>
<legend>Insert Accounts</legend>
<input id="insKey" type="text" placeholder="Enter Site...">
<input id="insValue1" type="text" placeholder="Enter Username...">
<input id="insValue2" type="text" placeholder="Enter Password...">
<input id="insValue3" type="text" placeholder="Enter Extra Details...">
<button type="button" id="btnInsert">Add New Profile</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="LSout"></div>
</fieldset>
</body>
<script type="text/javascript">
const insKey = document.getElementById('insKey');
const insValue1 = document.getElementById('insValue1');
const insValue2 = document.getElementById('insValue2');
const insValue3 = document.getElementById('insValue3');
const btnInsert = document.getElementById('btnInsert');
const LSout = document.getElementById('LSout');
btnInsert.onclick = function () {
const key = insKey.value;
const value1 = insValue1.value;
const value2 = insValue2.value;
const value3 = insValue3.value;
if (key && value1 && value2 && value3) {
localStorage.setItem(key, value1, value2, value3);
location.reload();
}
};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value1 = localStorage.getItem(key);
const value2 = localStorage.getItem(key);
const value3 = localStorage.getItem(key);
LSout.innerHTML += `${key}: ${value1} - ${value2} - ${value3}<br />`;
}
</script>
</html>
Apologises if it's very basic or if I'm asking for something that can't be done. Thanks for your time.
3 answers
solution1
0 2021-05-25 17:45:52
try
<html>
<head>
<title>Local Storage</title>
<style media="screen">
input, button {
padding: 7px;
height: 40px;
}
fieldset {
margin-bottom: 25px;
}
</style>
</head>
<body>
<h2 id="title">Local Storage - JS</h2>
<fieldset>
<legend>Insert Accounts</legend>
<input id="insKey" type="text" placeholder="Enter Site...">
<input id="insValue1" type="text" placeholder="Enter Username...">
<input id="insValue2" type="text" placeholder="Enter Password...">
<input id="insValue3" type="text" placeholder="Enter Extra Details...">
<button type="button" id="btnInsert">Add New Profile</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="LSout"></div>
</fieldset>
</body>
<script type="text/javascript">
const insKey = document.getElementById('insKey');
const insValue1 = document.getElementById('insValue1');
const insValue2 = document.getElementById('insValue2');
const insValue3 = document.getElementById('insValue3');
const btnInsert = document.getElementById('btnInsert');
const LSout = document.getElementById('LSout');
btnInsert.onclick = function () {
const key = insKey.value;
const value1 = insValue1.value;
const value2 = insValue2.value;
const value3 = insValue3.value;
if (key && value1 && value2 && value3) {
localStorage.setItem(key, [value1, value2, value3]);
location.reload();
}
};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
const value1 = value[0];
const value2 = value[1];
const value3 = value[2];
LSout.innerHTML += `${key}: ${value1} - ${value2} - ${value3}<br />`;
}
</script>
</html>
solution2
0 2021-05-25 17:46:22
the object in javascript is a key value pair, so if you use primitive data type (String, number, boolean), it can only save one value per key. So, you can think to have an object like below.
const obj = { key: { value1: "value1", value2: "value2", value3: "value3" } };
localStorage.setItem(key, JSON.stringify(object)) // need to stringify object before saving to localStorage
const obj = JSON.parse(localStorage.getItem(key); // need to parse string back to object
solution3
0 2021-05-25 17:50:20
You can't add multiple values to one key but you can pass an array of values.
First place the values in an array. const allValues = [value1, value2, value3] Then pass it to local storage. localStorage.setItem(keyName, allValues);
If you need to add a new value this is how you would do it.
let updateValues = localStorage.getItem(keyName);
updateValues.push(value);
localStorage.setItem(keyName, updateValues);
If you would like to loop through the values it would be very similar.
let values = localStorage.getItem(keyName);
for(let i = 0; i < values.length; i++){
values[i]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.