JSON download function reads keys from other programs

Question

EDIT: after some comments, I understand that I need JSON prefix keys better. I add generosity because it is important to me.

I make a form and I save it in JSON. Then I created a function to display the form data in the table below. The problem is that when the page loads, it loads data from another program that I made with a different key. In fact, it loads all the keys in local storage from anything. It will display the correct data, but the incorrect data is displayed as undefined.

Here is the function that calls the data.

getData: function () { var ORMcount = localStorage.length, i = 0; if (ORMcount > 0) { var renderData = "<table>"; renderData += "<tr><td>ORM Matrix</td></tr><br /><tr><th>Plan</th><th>Reward</th><th>Risks</th><th></th></tr>"; for (i = 0; i < ORMcount; i += 1) { var key = localStorage.key(i); //Get Key var ORM = localStorage.getItem(key); //Get Data try{ var data = JSON.parse(ORM); //Parse Data } catch(err) { continue; } renderData += "<td>"+ data.Plan + "</td>"; renderData += "<td>" + data.Reward + "</td>"; renderData += "<td>" + data.Risk + "</td>"; renderData += "<td class='xData' data-id='xData' data-index='"+key+"'>" + "x" + "</td></tr>"; //set a data-id and data-index to this element, we need them to select the correct information. renderData += "<tr><td>&nbsp;</td></tr>" } renderData += "</table>"; dvcontainer.innerHTML = renderData; Array.prototype.map.call(document.querySelectorAll("td[data-id='xData']"), function(element){ element.addEventListener("click", deleteRow, false); //attach a click handler to all delete buttons } ); } } 

If someone can help me with what I am doing wrong, I would really appreciate it.

Answer 1

it looks like you have multiple apps / websites running from the same source. local storage uses a policy of the same origin, that is, all your scripts from the same source will have access to the same data.

Data placed in local storage is the source (a combination of protocol, host name and port number, as defined in the same policy source) (data is available for all scripts downloaded from pages from the same origin that previously stored data) and saved after browser is closed.

from Wikipedia: web storage

because your different application scripts use the same local storage, they must store the data so that it does not conflict with each other.

Option A. Use one local storage key for each application / website

This option will be recommended. MDN: DOM Storage Guide says:

Keep in mind that everything you store in any repository described on this page is converted to a string using its .toString before storing. Therefore, an attempt to save a shared object will result in the string "[Object Object]" being saved instead of the object or its JSON representation. Using native JSON analysis and the serialization methods provided by the browser are a good and common way to store objects in string format.

use one json array for all strings and save it under one key in local storage. add rows, parse json, add data to the array and save them as a string in local storage. this way your application will use only one key in local storage, which should be unique to your application.

json should look something like this:

 [ {Plan: 1, Reward: 1}, {Plan: 2, Reward: 2}, {Plan: 3, Reward: 3}, ] 

add lines:

 var dataStr = localStorage.getItem('APPNAME-DATA'); var data = JSON.parse(dataStr); data.push({Plan: 4, Reward: 4}); dataStr = JSON.stringify(data); localStorage.setItem('APPNAME-DATA', dataStr); 

I see that you are using the key name for the data-index attribute of the table cell. since there are no key names in this solution, save the key-name in the object as well. for example: data.push({Key: 'keyname', Plan: 4, Reward: 4}); . Ideally, use a different name with a larger value than Key .

Option B. Use the prefix for local storage keys

name the keys APPNAME-KEYNAME . later, when you APPNAME- over the keys, check if the key name begins with APPNAME- . if you do not continue the next element.

 ... for (i = 0; i < ORMcount; i += 1) { var key = localStorage.key(i); //Get Key if ( key.indexOf('APPNAME-') !== 0 ) { continue; } ...