Funzione caricamento JSON legge chiavi da altri programmi

Question

EDIT: dopo alcuni commenti, mi rendo conto che ho bisogno di prefisso i miei tasti JSON meglio. Sto aggiungendo una taglia perché imparare questo è importante per me.

Sto creando un modulo e lo salvi in ​​JSON. Quindi ho creato una funzione per visualizzare i dati del modulo su una tabella sottostante. Il problema è che quando la pagina si carica, carica i dati da un altro programma che ho creato con una chiave diversa. Infatti, carica tutte le chiavi nell'archivio locale da qualsiasi cosa. Visualizzerà i dati corretti, ma i dati errati vengono visualizzati come non definiti.

Questa è la funzione che chiama i dati.

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 
      }); 
     } 
    } 

Se qualcuno mi può aiutare in quello che sto facendo male lo apprezzerei molto.

Answer 1

sembra che tu abbia diverse applicazioni/siti web in esecuzione dalla stessa origine. l'archiviazione locale utilizza una politica di origine identica, il che significa che tutti gli script di un'origine accederanno agli stessi dati.

dati inseriti nella memoria locale è per origine (la combinazione di protocollo, il nome host e il numero di porta, come definito nella stessa politica di origine ) (i dati sono a disposizione di tutti gli script caricati dalla pagine dal stesso origine che in precedenza memorizzava i dati) e persiste dopo il browser è chiuso.

da Wikipedia: Web storage

perché i diversi script di applicazioni condividono un locale di stoccaggio, devono salvare i dati in un modo che non sia in conflitto con l'altro.

Opzione A. Utilizzare una chiave locale-storage per applicazione/sito web

questa opzione sarebbe il modo consigliato. il MDN: DOM Storage Guide dice:

Tenete a mente che tutto ciò che si memorizzano in uno qualsiasi dei depositi descritte in questa pagina è convertito in stringa usando il suo metodo .toString prima di essere memorizzati. Pertanto, se si tenta di memorizzare un oggetto comune, il risultato sarà nella stringa "[oggetto oggetto]" anziché nell'oggetto o nella sua rappresentazione JSON. L'utilizzo dell'analisi JSON nativa e dei metodi di serializzazione forniti dal browser è un metodo valido e comune per lo per l'archiviazione di oggetti in formato stringa.

utilizzare un array json per tutte le righe e memorizzarlo sotto una chiave nella memoria locale. per aggiungere righe, analizzare il json, aggiungere i dati all'array e salvarlo come stringa nella memoria locale. in questo modo l'applicazione utilizzerà solo una chiave nell'archivio locale, che dovrebbe essere univoco per la tua app.

il JSON dovrebbe essere simile a questo:

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

per aggiungere righe fanno:

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); 

vedo si utilizza il nome della chiave per l'attributo data-index della cella della tabella. poiché non vi sono nomi di chiavi con questa soluzione, memorizzare anche il nome-chiave nell'oggetto. ad esempio: data.push({Key: 'keyname', Plan: 4, Reward: 4});. Utilizzare idealmente un altro nome, con più significato di Key.

Opzione B. Usare un prefisso sui tasti di archiviazione locale

nome le chiavi APPNAME-KEYNAME. più tardi, quando esegui un'iterazione sui tasti, controlla se il nome-chiave inizia con APPNAME-. se non si continua con l'elemento successivo.

... 
for (i = 0; i < ORMcount; i += 1) { 
    var key = localStorage.key(i); //Get Key 

    if (key.indexOf('APPNAME-') !== 0) { 
     continue; 
    } 
...