Question

我需要在课程中使用本地存储，并且我使用JSON的字符串化功能来完成此操作。我试图解析它，但由于某种原因它不起作用。当我使用我的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>

以下是名为＆＃34; json.js＆＃34;

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

这是我的代码＆＃34;检索数据＆＃34;并尝试将解析后的信息输出到＆＃34; #classList＆＃34;列表视图格式的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

永远不会太晚。我发现我在大学里正在研究的这个老问题，并决定完成它。这是跟踪您在本专业修读哪些班级的概念证明。我试图将数据存储在数组中。将其转换为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();

我的原始代码有太多错误，因此不值得一遍。要注意的重要步骤是步骤：

创建数据
将数据转换为JSON
将JSON存储在本地存储中
从本地存储中提取JSON
将JSON解析为两个数组
在使用classState变量将className变量分类为“ Class Taken”或“ Class”时，遍历数组之一未采取”
分别添加该类名称。

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

Answer 2

使用cn = {key:'value',key2:'value2',...}声明JSON，在您的示例中声明数组。

如何使用JSON将Array本地化，然后将其解析为页面

2 个答案: