I want to create an action for the button to be able to add items to the basket and keep data in localStorage. I'm struggling with push items when the basket has already more than one item inside. I can easily increase the quantity of existing items if an ID is same but can't add new items. Data I'm getting from JSON file. JSON contains only five unique IDs. Below part of my code.
AddBtn.addEventListener('click', function (add) { //Add item to when click AddBtn localStorage
add.preventDefault() // Avoid default action.
const basket = JSON.parse(localStorage.getItem('basket')); // Parse data from localstorage
let elementimageUrl = element.imageUrl; // element.imageUrl is a part of backend data received from JSON file
let elementId = element._id; // element._id is a part of backend data received from JSON file
let elementName = element.name; // element.name is a part of backend data received from JSON file
let elementPrice = element.price; // element.price is a part of backend data received from JSON file
let elementQuantity = 1;
if(basket === undefined || basket.length > 4 ){
//Existing data block in local storage
basket.forEach(product => {
if (product.elementId === elementId) {
product.elementQuantity++
console.log('increase');
}
});
} else{
//Non Exist data block in local storage
basket.push({elementId, elementName, elementPrice, elementQuantity, elementimageUrl}); // Push not existing data to localstorage
console.log('add')
window.location.reload();
}
localStorage.setItem('basket', JSON.stringify(basket));
});
Here is a working solution for your problem.
AddBtn.addEventListener('click', function (add) { //Add item to when click AddBtn localStorage
add.preventDefault() // Avoid default action.
let basket = JSON.parse(localStorage.getItem('basket')); // Parse data from localstorage
let elementimageUrl = element.imageUrl; // element.imageUrl is a part of backend data received from JSON file
let elementId = element._id; // element._id is a part of backend data received from JSON file
let elementName = element.name; // element.name is a part of backend data received from JSON file
let elementPrice = element.price; // element.price is a part of backend data received from JSON file
let elementQuantity = 1;
if (!basket) {
basket = [];
}
// find the index of the item if already in basket
const itemIndexInBasket = basket.findIndex(basketEntry => basketEntry.elementId === elementId);
if (itemIndexInBasket !== -1) {
basket[itemIndexInBasket].elementQuantity++;
} else {
basket.push({elementId, elementName, elementPrice, elementQuantity, elementimageUrl}); // Push not existing data to localstorage
}
localStorage.setItem('basket', JSON.stringify(basket));
});
Can you share a jsfiddle link with dummy values for variables? It will be a lot easier to debug.
Seeing the above explanation that you are facing a problem with push items I assumed this below data and it is working.
const basket = [{abc:"1"},{abcs:'3'}];
let elementimageUrl = 'abc';
let elementId = 1;
let elementName = 'a';
let elementPrice = 10;
let elementQuantity = 1;
basket.push({elementId, elementName, elementPrice, elementQuantity, elementimageUrl});
console.log('add')
console.log(basket);
localStorage.setItem('basket', JSON.stringify(basket));
For example:
object1(1) = {
name: 'Rhodok Sergeant',
speciality: 'Hand to hand battle'
}
then I want to update only the speciality field, into:
object1(1) = {
name: 'Rhodok Sergeant',
speciality: 'Long range battle'
}
Thank you.
This is possible using following steps -
fetch the item first using idbcursor
update that item
call cursor.update to store updated data in indexedb.
An example code is -
const transaction = db.transaction(['rushAlbumList'], 'readwrite');
const objectStore = transaction.objectStore('rushAlbumList');
objectStore.openCursor().onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
if (cursor.value.albumTitle === 'A farewell to kings') {
const updateData = cursor.value;
updateData.year = 2050;
const request = cursor.update(updateData);
request.onsuccess = function() {
console.log('data updated');
};
};
cursor.continue();
}
};
Check out this link for more info - https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor/update
Note:- In above code, i am looping through all records which is not efficient in case you want to fetch the particular record based on some condition. So you can use idbKeyRange or some other idb query alternative for this.
you cannot do partial updates, you can only overwrite an entire object
read the object in from memory, change it, and then write it back
I want to append the string to keys in session storage i tried below code but it is not working
var setSession = window.sessionStorage.setItem.bind(window.sessionStorage);
window.onload = function()
{
window.sessionStorage.setItem = function(key, value) {
var newKey = "1234"+"::"+key;
alert("inside account new key "+newKey);
return setSession(newKey, value);
}
}
Any suggestions more appreciated...
Not sure what you're after by using localStorage and sessionStorage but here's how to add a prefix to the key and don't do it again if the prefix already exists. Additionally it removes the original keys:
Object.keys(localStorage).forEach(function(key) {
if(/^1234::/.test(key)) return; // Don't repeat if "1234::" exists already
localStorage[`1234::${key}`] = localStorage[key];
delete localStorage[key];
});
if the prefix 1234 is a variable than you could do it like:
let ID_key = '1234';
Object.keys(localStorage).forEach(function(key) {
if(new RegExp(`^${ID_key}::`).test(key)) return; // Don't repeat if 1234 exists already
localStorage[`${ID_key}::${key}`] = localStorage[key];
delete localStorage[key];
});
If I've understood correctly, you want to change the key of an item in session storage?
You could try using the code below.
function changeKey(oldKey, newKey) {
var item = sessionStorage.getItem(oldKey)
sessionStorage.setItem(newKey, item)
sessionStorage.removeItem(oldKey)
}
If you wanted to append a string, you could use this instead:
function appendToKey(oldKey) {
var item = sessionStorage.getItem(oldKey)
oldKey = '1234' + '::' + oldKey
sessionStorage.setItem(newKey, item)
sessionStorage.removeItem(oldKey)
}
I am using Ionic and I am saving the preference of a user in localstorage.
Now, I would want to show this data in the profile of this person (so in a different screen / page), yet I have no clue how I should fetch this data.
Could someone help me out?
// get favorites from local storage or empty array
var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// add class 'fav' to each favorite
favorites.forEach(function(favorite) {
document.getElementById(favorite).className = 'fav';
});
// register click event listener
document.querySelector('.list').addEventListener('click', function(e) {
var id = e.target.id,
item = e.target,
index = favorites.indexOf(id);
// return if target doesn't have an id (shouldn't happen)
if (!id) return;
// item is not favorite
if (index == -1) {
favorites.push(id);
item.className = 'fav';
// item is already favorite
} else {
favorites.splice(index, 1);
item.className = '';
}
// store array in local storage
localStorage.setItem('favorites', JSON.stringify(favorites));
});
// local storage stores strings so we use JSON to stringify for storage and parse to get out of storage
This is my Codepen:
https://codepen.io/CrocoDillon/pen/pIlKB
As long as you are staying on the same domain, you should have access to the same localStorage object. So this should work:
var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
localStorage.getItem('favorites') itself is an accessor
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.
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>
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:
JSON.stringify()
JSON.parse()
localStorage
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;
});
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>
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;
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");
};
Add item: localStorage.name = 'Name'
Get item: let name = localStorage.name
Remove item: localStorage.removeItem('name')