JSON加载函数从其他程序读取密钥

Question

编辑:经过一些评论,我意识到我需要更好地为我的JSON键添加前缀.我正在加入赏金,因为学习这对我很重要.

我正在制作一个表单,然后将其保存为JSON.然后我做了一个函数来在它下面的表格上显示表单数据.问题是,当页面加载时,它会从我制作的具有不同键的另一个程序中加载数据.实际上,它从任何东西加载本地存储中的所有密钥.它将显示正确的数据,但不正确的数据显示为未定义.

这是调用数据的函数.

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

如果有人能帮助我做错我会非常感激.

Answer 1

看起来您有多个应用程序/网站从同一源运行。本地存储使用同源策略，这意味着来自一个源的所有脚本都将访问相同的数据。

放置在本地存储中的数据按源（同源策略中定义的协议、主机名和端口号的组合）（数据可用于从先前存储数据的同一源的页面加载的所有脚本）并保留浏览器关闭后。

来自维基百科：网络存储

由于不同的应用程序脚本共享一个本地存储，因此它们必须以一种不会相互冲突的方式保存数据。

选项 A. 每个应用程序/网站使用一个本地存储密钥

此选项将是推荐的方式。MDN ：DOM 存储指南说：

请记住，您存储在本页描述的任何存储中的所有内容在存储之前都会使用其 .toString 方法转换为字符串。因此，尝试存储公共对象将导致存储字符串“[object Object]”，而不是存储对象或其 JSON 表示形式。使用浏览器提供的原生 JSON 解析和序列化方法是以字符串格式存储对象是一种很好且常用的方法。

对所有行使用一个 json 数组，并将其存储在本地存储中的一个键下。要追加行，请解析 json，将数据追加到数组，然后将其作为字符串保存回本地存储。这样，您的应用程序将只使用本地存储中的一个密钥，该密钥对于您的应用程序来说应该是唯一的。

json 应类似于以下内容：

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

要追加行，请执行以下操作：

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

data-index我看到您使用表单元格属性的键名称。由于此解决方案没有键名称，因此也将键名称存储在对象中。例如：data.push({Key: 'keyname', Plan: 4, Reward: 4});。最好使用比 更有意义的另一个名称Key。

选项 B. 在本地存储键上使用前缀

为按键命名APPNAME-KEYNAME。稍后当您迭代键时，检查键名是否以 开头APPNAME-。如果没有继续下一项。

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

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