We Keep Coding

Using local storage to sync data across pages

I'm very new to JS and I'm trying to sync the listing data by using local storage example below:
https://imgur.com/lN1x1TH
Song 1 -> Song 1 Detail page
Song 2 -> Song 2 Detail page
Song 3 -> Song 3 Detail page
There will be only one detail page associated with the 3 listings.
Anyway to achieve this without creating multiple pages for the individual detail listing?
index.js
fetch('x')
.then(function(res) {
return res.json();
})
.then(function(data) {
var Data = JSON.stringify(data);
if (localStorage.getItem("songStoreData") === null || typeof localStorage.getItem("songStoreData") === "undefined") {
localStorage.setItem("songStoreData", Data);
}
//get the stored data
var songJSON = localStorage.getItem("songStoreData");
//parse the data to JSON
var Obj = JSON.parse(songJSON);
//for debugging
console.log(Obj);
for (i = 0; i < Obj.songs.length; i++) {
homeList.innerHTML +=
'<li class="li_product_"' + i + '"><div class="li_product_image"><img src="' + Obj.songs[i].image + '"></div><div class="li_product_name">' + Obj.songs[i].name + ', ' + Obj.songs[i].artist + '<br><span class="li_product_duration">' + Obj.songs[i].duration + ' minutes</span></div></div></li>';
}
})
detail.js
var songJSON=localStorage.getItem("songStoreData");
var Obj=JSON.parse(songJSON);
console.log(Obj);
function addDetails(){
document.getElementById('span_header').innerHTML = '<img id="btn_product_details_back" src="img/back_white.png">' + Obj.songs.artist + '';
document.getElementById('div_product_details_img').innerHTML = '<img src="' + Obj.songs.image + '">';
document.getElementById('data_name').innerHTML = Obj.songs.name;
document.getElementById('data_genre').innerHTML = Obj.songs.genre;
document.getElementById('data_release').innerHTML = Obj.songs.release;
document.getElementById('data_duration').innerHTML = Obj.songs.duration;
var Data=JSON.stringify(Obj);
//store the string format data in local storage
localStorage.setItem("songStoreData", Data);
//window.location='index.html';
return false;
}
addDetails();

When I add a new element to my database the whole things stops to work

I am still trying to build my website where people can text each other, send photos etc.
The chat thing works really well until I wanna add the functionality checking whether the second user in the chat is typing.
Here is my code without the typing thing, this works really well ;)
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
// temporary user and receiver's names
const username = prompt("Nickname:");
const receiver = prompt("Receiver's name:");
// sending a message
document.getElementById("send-message").addEventListener("submit", postChat);
function postChat(e)
{
e.preventDefault();
const timestamp = Date.now();
const chatTxt = document.getElementById("chat-txt");
const message = chatTxt.value;
chatTxt.value = "";
db.ref("messages/" + username + "/" + receiver + "/" + timestamp).set({
usr: username,
msg: message,
});
db.ref("messages/" + receiver + "/" + username + "/" + timestamp).set({
usr: username,
msg: message,
});
}
// printing the message
const fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
fetchChat.on("child_added", function (snapshot)
{
const messages = snapshot.val();
const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
document.getElementById("messages").innerHTML += msg;
});
The problem appears when I want to check if the second user is typing. When I am adding the code that's below messages just stop to work. There is a random null in the database as a new user who sent a message to another null. The chat between users also stops to work, users don't see same messages, sometimes can't see any of them and always "undefined" types "undefined" when I refresh the website.
At least it correctly shows when someone is typing, but the rest of the functionalities (which used to work) just don't work anymore.
Here is the code of the typing thing, I also tried to check whether the username and receiver's name aren't null but it didn't reallly help.
// showing whether the receiver is typing
function sendTyping(tmp)
{
if(tmp)
{
db.ref("messages/" + username + "/" + receiver).set({
tpg: "yes"
});
}
else
{
db.ref("messages/" + username + "/" + receiver).set({
tpg: "no"
});
}
}
var searchTimeout;
document.getElementById("chat-txt").onkeydown = function() {
if (searchTimeout != undefined)
clearTimeout(searchTimeout);
searchTimeout = setTimeout(callServerScript, 1500);
sendTyping(true);
}
function callServerScript() {
sendTyping(false);
}
let areTheyTyping = db.ref("messages/" + receiver + "/" + username);
areTheyTyping.on("value", function(snapshot) {
const typing = snapshot.val();
const status = typing.tpg;
if(status == "yes")
document.getElementById("writing").innerHTML = "typing...";
else
document.getElementById("writing").innerHTML = "";
});
I mostly wrote this by myself, I will appreciate any kind of help, just please use a straightforward language so I can easily understand the explanation of the problem, I am kind of new.

The function
const fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
fetchChat.on("child_added", function (snapshot)
{
const messages = snapshot.val();
const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
document.getElementById("messages").innerHTML += msg;
});
It fetches the chat whenever a child is added to the directory of your messages, so when you store the typing status in "messages/" + username + "/" + receiver + "/" the function .on knows that you've changed/added something, therefore posting a message. It's undefined because the message is in fact empty. You should create a new directory where you store the areTheyTyping status, something like "status/" + username + "/" + receiver + "/" Hope I helped.

My experience showed that firestore has problem with undefined values. You can try adding a default value for undefined or null usernames. Maybe you can add zero (0) as the default value for this matter.

Change the path db.ref("messages/" + receiver + "/" + username) to db.ref("messages/" + username + "/" + receiver) at areTheyTyping. See if it works
function sendTyping(tmp)
{
if(tmp) {
db.ref("messages/" + username + "/" + receiver).set({
tpg: "yes"
});
}
else {
db.ref("messages/" + username + "/" + receiver).set({
tpg: "no"
});
}
}
var searchTimeout;
document.getElementById("chat-txt").onkeydown = function() {
if (searchTimeout !== undefined)
clearTimeout(searchTimeout);
searchTimeout = setTimeout(callServerScript, 1500);
sendTyping(true);
}
function callServerScript() {
sendTyping(false);
}
let areTheyTyping = db.ref("messages/" + username + "/" + receiver);
areTheyTyping.on("value", function(snapshot) {
const typing = snapshot.val();
const status = typing.tpg;
if(status === "yes")
document.getElementById("writing").innerHTML = "typing...";
else
document.getElementById("writing").innerHTML = "";
});

how to run different sessions of same domain in same browser?

I want to login with multiple logins for the domain in same browser.
example there is a messaging service call slack if i login in first tab and if i open second tab in same browser it should no share session with second tab it should be altogether a new one.
I've tried below block of code but it is not working how do i acheive this
var clearLocal = window.localStorage.clear.bind(window.localStorage);
var getLocal = window.localStorage.getItem.bind(window.localStorage);
var keyLocal = window.localStorage.key.bind(window.localStorage);
var removeLocal = window.localStorage.removeItem.bind(window.localStorage);
var setLocal = window.localStorage.setItem.bind(window.localStorage);
window.localStorage.getItem = function(key) {
alert("inside account key " + key);
var newKey = accountId + "::" + key;
alert("inside account new key " + newKey);
return getLocal(newKey);
}
window.localStorage.key = function(index) {
console.log("KEY " + index);
return keyLocal(index);
}
window.localStorage.removeItem = function(key) {
var newKey = accountId + "::" + key;
console.log("REMOVE " + newKey);
return removeLocal(newKey);
}
window.localStorage.setItem = function(key, value) {
var newKey = accountId + "::" + key;
alert("inside account new key " + newKey);
return setLocal(newKey, value);
}
Any suggestions more appreciated..

How to implement pagination in Firebase using JavaScript?

I am working on Firebase pagination using JavaScript. I have implemented a soft delete feature where the record is not deleted in Firebase but deleted in the web display.
So when a soft delete is being done, the visible flag in Firebase becomes false. I want to display on my web form, the contacts whose visible flag is true using JavaScript ( with the NEXT and PREV buttons ).
Since I am new to this, I would love to get suggestions and help!!
A Snapshot of Firebase is as follows:
My code of getting first three records initially is as follows :
function getData() {
var total="";
var firstRef = firebase.database().ref("Persons/").orderByChild("visible").endAt("true").limitToFirst(3);
firstRef.on("value", function (data) {
console.log(data.val());
a = data.val();
var keys = Object.keys(a);
key1 = keys[0];
key2 = keys[1];
console.log("Key 1" + keys[0]);
for (var i = 0; i < keys.length; i++)
{
var k = keys[i];
var fname = a[k].fname;
var lname = a[k].lname;
var mno = a[k].mno;
var email = a[k].email;
var image = a[k].image;
var visible = a[k].visible;
if (visible == true) {
total += "<div><br/></div<div><b>KEY ID: </b><h1>" + k + "</h1></div><div><br/></div><div><img src=" + image + " alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>" + fname + "</div><div><b>LAST NAME : </b>" + lname + "</div><div><b>MOBILE NO : </b>" + mno + "</div><div><b>EMAIL : </b>" + email + "</div><div><br/><b><hr><hr></b></div>";
document.getElementById('total').innerHTML = total;
}
}
},
function (error) {
console.log("Error: " + error.code);
});
}
To get the Next three records (which will be called when the NEXT button is pressed ), I have written a code as follows :
function next() {
var total="";
var lastRef = firebase.database().ref("Persons").orderByKey().startAt(key2 + "a").limitToFirst(3);
lastRef.on("value", function (data) {
c = data.val();
var keys = Object.keys(c);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var visible = c[k].visible;
if(visible==true)
{
var fname = c[k].fname;
var lname = c[k].lname;
var mno = c[k].mno;
var email = c[k].email;
var image = c[k].image;
total += "<div><br/></div<div><b>KEY ID: </b><h1>" + k + "</h1></div><div><br/></div><div><img src=" + image + " alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>" + fname + "</div><div><b>LAST NAME : </b>" + lname + "</div><div><b>MOBILE NO : </b>" + mno + "</div><div><b>EMAIL : </b>" + email + "</div><div><br/><b><hr><hr></b></div>";
document.getElementById('total').innerHTML = total;
}
}
key3=key1;
key4=key2;
key2=keys[2];
key1=keys[0];
},
function (error) {
console.log("Error: " + error.code);
});
}
I am new to Firebase, so please do correct me if I am wrong and also, if anybody could help me with PREV, it would be great!!
Thanks!!

Retrieve data from firebase resulting in undefined

I was having this problem when trying to pull from firebase. My database structure as such:
I am trying to pull the merchantName and its relevant branches details:
function getAllMerchant(){
var query = firebase.database().ref('merchants');
return query.once('value').then(data => {
var result = [];
data.forEach(snapshot => {
var merchantData = snapshot.val();
var merchantName = merchantData.merchantName;
var branchName = merchantData.branches.branchName;
var branchAddress = merchantData.branches.branchAddress;
console.log('check ' + merchantName + ' ' + branchName + ' ' + branchAddress);
result.push({merchantName: merchantName, branchName: branchName, branchAddress: branchAddress});
});
return result;
});
resolve(result);
}
However, when I printed out the branchName and branchAddress, I am getting undefined. I managed to print out merchantName though. Any ideas?
Thanks!

You're not iterating over the branches of the merchant.
data.forEach(merchantSnapshot => {
var merchantData = snapshot.val();
var merchantName = merchantData.merchantName;
console.log('check ' + merchantName);
merchantSnapshot.child("branches").forEach(brancheSnapshot => {
var branchName = brancheSnapshot.val().branchName;
var branchAddress = brancheSnapshot.val.branchAddress;
console.log(' ' + branchName + ' ' + branchAddress);
});
});