javascript - 如何使用 JSON 将数组本地化然后将其解析为页面

Question

我需要为类使用本地存储，并且我正在使用 JSON 的 stringify 函数来执行此操作。我正在尝试解析它，但由于某种原因它不起作用。当我使用 if 语句时， ct2 和 cn2 实际上不起作用。首先是 html。

<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Graphic Design</h1>

    </div>
    <div data-role="content" id="classList">
        <div id="classes" data-role="listview"></div>
    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <h4>Department of Art</h4>

    </div>
</div>

<小时/>

这是名为“json.js”的 JSON javascript 文件

var cn = ["Art 150 Drawing 1", "Art 170 Basic Design 1", "Art 171 Basic Design 2", "Art 274 Typography 1", "Art 282 Computer Art 1", "Art 235 Ancient/Medevil Art", "Art 236 Renaissance/Mid-19th Century", "Art 237 Impressionism/Post Modernism", "Art 324 History of Photography", "Art 225 Photo 1 or Art 226 Digital Photo", "Art 351 Illustration 1", "Art 374 History of Graphic Design", "Art 370 Layout & Design 1", "Art 371 Layout & Design 2", "Art 372 Design & Production 1", "Art 451 Illustration 2", "Art 470 Advertising Graphic Design", "Art 471 Corporate Graphic Design", "Art 472 Typography 2", "Art 490 Internship", "Art 495 Portfolio Class"]
var ct = ["n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n"]

localStorage.setItem("classTaken", JSON.stringify(ct));
localStorage.setItem("className", JSON.stringify(cn));

<小时/>

这是我的代码，“retrievesData”并尝试将解析的信息以 ListView 格式输出到“#classList”div。

$(document).ready(function () {

    $.getJSON("json.js", function (data) {

        var retrievedData = localStorage.getItem("className");
        var cn2 = JSON.parse(retrievedData);

        var retrievedData = localStorage.getItem("classTaken");
        var ct2 = JSON.parse(retrievedData);



    for (var i = 0; i < ct.length; i++) {
        var info = '<li>' + cn2[i] + '</li>'


        if (ct2[i] == "y") {
            $('#classes').append(info);
        } else {
            $('#notTaken').append(info);
        }
    }
});
    });

Answer 1

永远不会太晚。我发现了我在大学时正在研究的这个老问题，并决定完成它。这是一个概念证明，用于跟踪您在专业中选修了哪些类(class)。我试图将数据存储在数组中。将其转换为 JSON 并将其保存在本地存储中。然后，将该 JSON 转换回数组，并根据我的 if 语句对数据进行相应排序。

所以，作为一个非常环保的人，我采取了一种完全奇怪且富有创意的方式。

我的第一个 javascript 是尝试创建 json。我的第二段代码是尝试将该 json 解析回数组并对数据进行排序。

这是一个CodePen我最初打算做的功能版本。

我的 HTML

<div data-role="page" id="page1">
<div data-role="header">
        <h1>Graphic Design</h1>

</div>
<div data-role="content" id="classList">
  <h2>Classes Taken</h2>
    <div id="classes" data-role="listview"></div>
  <h2>Classes Not Taken</h2>
    <div id="notTaken" data-role="listview"></div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
        <h4>Department of Art | Class Course List | Graphic Design</h4>
  <script>
    getMyDataPlease();
  </script>
</div>

我的 JavaScript

var className = ["Art 150 Drawing 1", "Art 170 Basic Design 1", "Art 171 Basic Design 2", "Art 274 Typography 1", "Art 282 Computer Art 1", "Art 235 Ancient/Medevil Art", "Art 236 Renaissance/Mid-19th Century", "Art 237 Impressionism/Post Modernism", "Art 324 History of Photography", "Art 225 Photo 1 or Art 226 Digital Photo", "Art 351 Illustration 1", "Art 374 History of Graphic Design", "Art 370 Layout & Design 1", "Art 371 Layout & Design 2", "Art 372 Design & Production 1", "Art 451 Illustration 2", "Art 470 Advertising Graphic Design", "Art 471 Corporate Graphic Design", "Art 472 Typography 2", "Art 490 Internship", "Art 495 Portfolio Class"]

var classStatus = ["y", "y", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "n", "y", "y"]

function convertToJSONPlease() {
// convert both arrays to JSON objects and store them in local storage
localStorage.setItem('className', JSON.stringify(className));
localStorage.setItem('classStatus', JSON.stringify(classStatus));
}

// calling function
convertToJSONPlease();

function getMyDataPlease() {

// get your data from local storage and parse it 
var classes = JSON.parse(localStorage.getItem('className'));
var classState = JSON.parse(localStorage.getItem('classStatus'));

// loop through the class state
for (var i = 0; i < classState.length; i++) {
    var info = "<li>" + classes[i] + "</li>";

    // if the class state is set to yes, add the class to the taken list, otherwise add it to the not taken list
    if (classState[i] == "y") {
    $('#classes').append(info);
    } else {
    $('#notTaken').append(info);
    }
}
};

// calling function
getMyDataPlease();

我的原始代码有很多错误，不值得一试。需要注意的重要事项是步骤:

1. 创建您的数据
2. 将您的数据转换为 JSON
3. 将 JSON 存储在本地存储中
4. 从本地存储中提取 JSON
5. 将该 JSON 解析为两个数组
6. 循环遍历数组之一，同时使用 classState 变量将 className 变量排序为“Class Taken”或“Class未拍摄”
7. 分别附加该类名称。

关于我的 CodePen，需要注意的一件事是，我将所有内容放在一个文件中并相应地调用它，但重点是您可以采用此原型(prototype)并创建一个类(class)跟踪应用程序，该应用程序使用本地存储来记住用户已经参加了哪些类(class)。