1

我需要为一个类使用本地存储，并且我正在使用 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”并尝试将解析的信息以列表视图格式输出到“#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);
        }
    }
});
    });
4

2 回答 2

0

永远不会太迟。我发现了我在大学里研究的这个老问题，并决定完成它。这是一个概念证明，用于跟踪您在专业内上过哪些课程。我试图将数据存储在数组中。将其转换为 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 Not Taken”时循环遍历数组之一
  7. 分别附加该类名称。

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

于 2018-07-11T06:20:55.207 回答
-2

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

于 2013-05-24T21:54:29.923 回答