javascript - JSON 加载函数从其他程序读取 key

标签 javascript json

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

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

这里是调用数据的函数。

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

如果有人可以帮助我解决我做错的事情,我将不胜感激。

最佳答案

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

Data placed in local storage is per origin (the combination of protocol, hostname, and port number as defined in the same origin policy) (the data is available to all scripts loaded from pages from the same origin that previously stored the data) and persists after the browser is closed.

来自 Wikipedia: Web storage

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

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

此选项是推荐的方式。 MDN: DOM Storage Guide说:

Keep in mind that everything you store in any of the storages described in this page is converted to string using its .toString method before being stored. So trying to store a common object will result in string "[object Object]" to be stored instead of the object or its JSON representation. Using native JSON parsing and serialization methods provided by the browser is a good and common way for storing objects in string format.

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

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. 在本地存储 key 上使用前缀

将键命名为 APPNAME-KEYNAME。稍后当您遍历键时,检查键名是否以 APPNAME- 开头。如果没有继续下一个项目。

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

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

关于javascript - JSON 加载函数从其他程序读取 key ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30874767/

相关文章:

javascript - 使用Jquery删除div之间的div

javascript - 在 backbone.js 集合中持久化和加载元数据

javascript - 查找等于 json 文件中某个值的元素

javascript - 如何在 React + Typescript 中将状态更新到之前的状态

javascript - Angularjs ES6 类指令

javascript - 如何在 Node js中解析JSON?

PHP-fputcsv : put JSON values retrieved from MySQL field in separate columns

javascript - 如何查找 JSON 对象是否包含数字并返回它们?

javascript - promise 只能与 then 函数一起正常工作

javascript - 如何使用nodeJS 和discordJS 更改Discord channel 名称?