javascript - 本地存储只存储我的部分数据， session 存储中没有存储任何数据

Question

我是一名学生，我正在为一门类(class)建立一个网站。这是网站中的js、html、css页面。当我运行这个程序时，它会在本地存储中保存街道地址，但不会保存城市和邮政编码。我不明白为什么会这样。 session 存储中根本没有显示任何内容。我附上了 app.js、html-template.js、menu.js、app.css 和 submit.html。我附上了浏览器调试器的屏幕截图，显示了本地存储中的内容。

**APP.JS**


var App = {

  Menu: null,
  OrderCostTotal: 0,
  PendingOrderKey: "PendingOrder",
  UsedAddressesKey: "UsedAddresses",
  DeliveryAddressKey: "DeliveryAddress",
  AddressIDSelected: null,
  RefreshCycle: 4000,
  OrderStatus: ["Canceled", "Order Placed", "We Are Preparing Your Food", "In The Oven / Cooking", "Out For Delivery"],


  Init: function() {


    this.Menu = JoesPizza.Menu;
    $("#PizzaOrderNext").click(this.OrderNext);

  },

  InitSubmit: function() {

    this.LoadOrderDetails();
    this.LoadOrderAddress();

  },

  LoadMenu: function() {

    $("#MenuItemList").html("");

    this.Menu.items.forEach(item => {
      let html = HtmlCode.GetMenuItem(item);
      $("#MenuItemList").append(html);


    });

    // attach click events to new menu items
    let selector = "div[act=\"add2order\"]";
    $(selector).click(function() {
      //read values from the clicked menu item
      let lbl = $(this).attr("lbl");
      let cost = $(this).attr("cost");
      App.OrderCostTotal += parseFloat(cost);
      // html order item
      let html = HtmlCode.GetOrderItem({
        "lbl": lbl,
        "cost": cost
      });
      $("#PizzaOrderItems").append(html);
      App.OnAddUpdateOrderTotal();
      // attach click events on order items
      // add remove method; this can be improved
      $(".order-item").off("click");
      $(".order-item").click(function() {
        let cost = $(this).attr("cost");
        App.OrderCostTotal -= parseFloat(cost);
        App.OnRemoveUpdateOrderTotal();
        $(this).remove();
      });
    });
  },

  OnAddUpdateOrderTotal: function() {

    // needs correction
    let selector = '#PizzaOrderSummary, #PizzaOrderNext';
    $(selector).css("visibility", "visible");
    let total = "$" + App.OrderCostTotal.toFixed(2);
    selector = "#PizzaOrderSummary > div:nth-child(2)";
    $(selector).html(total);
  },

  OnRemoveUpdateOrderTotal: function(cost) {

    // needs correction
    if ($(".order-item").length == 1) {
      let selector = "#PizzaOrderSummary, #PizzaOrderNext";
      $(selector).css("visibility", "hidden");
      return false;
    } else {
      let total = "$" + App.OrderCostTotal.toFixed(2);
      let selector = "#PizzaOrderSummary > div:nth-child(2)";
      $(selector).html(total);
      return true;
    }
  },

  OrderNext: function() {

    if ($(".order-item").length == 0) {
      alert("There seems to be a problem with your order.");
      return false;
    }

    // read order info
    let arr = [];
    var total = 0;
    $(".order-item").each((idx, item) => {
      let lbl = $(item).attr("lbl");
      let cost = $(item).attr("cost");
      arr.push({
        "lbl": lbl,
        "cost": cost
      });
    });

    // store order into
    let json = JSON.stringify(arr);
    localStorage.setItem(App.PendingOrderKey, json);

    // move to submit page
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
    window.location.assign("/submit/");

  },

  LoadOrderDetails: function() {

    let buff = localStorage.getItem(App.PendingOrderKey);
    let order = JSON.parse(buff);

    order.forEach(item => {
      App.OrderCostTotal += parseFloat(item.cost);
      let html = HtmlCode.GetOrderDetailsItem(item);
      $("#OrderDetails").append(html);
    });

    let data = {
      "lbl": "Total Cost:",
      "cost": App.OrderCostTotal.toFixed(2)
    };
    let html = HtmlCode.GetOrderDetailsItem(data);
    $("#OrderDetails").append(html);
  },

  LoadOrderAddress: function() {

    let buff = localStorage.getItem(App.UsedAddressesKey);
    if (buff == null) {
      let html = "<div>Enter address to deliver your pizza</div>";
      $("#AddressSelect").html(html);
    } else {
      let adrs = JSON.parse(buff);
      let html = HtmlCode.GetAddressSelector("SelDelAdr", adrs);
      $("#AddressSelect").html(html);
      /* attach events */
      $("#SelDelAdr").change(function() {
        App.AddressIDSelected = parseInt($(this).val());
        let adr = adrs[App.AddressIDSelected];
        $("#txtStreetAddress").val(adr.street);
        $("#txtCity").val(adr.city);
        $("#txtZipCode").val(adr.zcode);

      });
    }

    let selector = ".address-lines > div:last-child";
    $(selector).click(App.PrePostOrder);
  },

  PrePostOrder: function() {

    /* read address info */
    let street = $("#txtStreetAddress").val();
    let city = $("txtCity").val();
    let zcode = $("txtZipCode").val();

    /* homework... validate address info */
    if (!App.validateAddressData(street, city, zcode)) {
      alert("Please correct address info.");
      return false;
    }

    /* create and store delivery address */
    let adr = {
      "street": street,
      "city": city,
      "zcode": zcode
    };
    localStorage.setItem(App.DeliveryAddressKey, JSON.stringify(adr));

    /* cache address */
    App.CacheCurrentAddress(adr);

    /*
    here we are ready to submit our pizza order to joe's pizzeria
    we hide current frame and bring up status frame
    http://api.jquery.com/fadeout/
    */

    $(".submit-delivery").fadeOut(500, () => {
      $(".submit-status").fadeIn(500, () => {
        App.PostOrder();
      })
    });

  },

  CacheCurrentAddress: function(adr) {

    if (App.AddressIDSelected != null)
      return false;

    let buff = localStorage.getItem(App.UsedAddressesKey);
    let arr = (buff) ? JSON.parse(buff) : [];
    if (App.IsAddressCached(arr, adr))
      return false;

    arr.push(adr);
    buff = JSON.stringify(arr);
    localStorage.setItem(App.UsedAddressesKey, buff);

  },

  IsAddressCached: function(arr, adr) {

    let rval = false;
    let street = adr.street.trim();

    for (let idx in arr) {
      let buff = arr[idx].street.trim();
      if (buff === street) {
        rval = true;
        break;
      }
    }

    return rval;
  },

  validateAddressData: function(street, city, zcode) {

    let rval = true;
    /*
        check if passed values are null, undefined or empty strings
        if so reject... return false;

        rval = false
    */
    /* if (street !== "" && city !== "" && zcode !== null){
         return rval;
     } else {
         rval = false;

     */
    return rval;
    /*   }
     */
  },

  PostOrder: function() {

    /*alert("posting order"); */
    let order = localStorage.getItem(App.PendingOrderKey);
    let addr = localStorage.getItem(App.DeliveryAddressKey);

    /* place order */
    let backend = new ClientBackend();
    backend.PostOrder(order, addr, (msg) => {

      let orderid = parseInt(msg);
      if (orderid) {
        $("#feedbackMsg").html(`Your Order ID: ${orderid}`);
        /* start to monitor order status */
        setInterval(App.MonitorOrderStatus, App.RefreshCycle, orderid);

      } else {
        $("#feedbackMsg").html(msg);
      }

    });

  },

  MonitorOrderStatus: function(orderid) {

    let backend = new ClientBackend();
    backend.MonitorOrderStatus(orderid, (scode) => {
      let status = App.OrderStatus[parseInt(scode)];
      let dts = new Date().toLocaleTimeString();
      let msg = `Your Order ID: ${orderid}; <i>${status};</i> ${dts}`;
      $("#feedbackMsg").html(msg);

    });
  }

}

function newFunction() {
  return "SelDelAdr";
}


**HTML-TEMPLATE.JS**  


var HtmlCode = {

  GetMenuItem: function(item) {

    let plg = item.choices[0];
    let prg = item.choices[1];
    let lbl_plg = `${item.type} - ${item.name} - ${plg.size}`;
    let lbl_prg = `${item.type} - ${item.name} - ${prg.size}`;

    return `<div class= "menu-item"> 
        <div><div><img src="${item.img}"></div><div>${item.name}</div> 
        </div><div>${item.descr}</div> 
        <div> 
            <div act="add2order" id="${plg.id}" cost="${plg.cost}" lbl="${lbl_plg}" title="Click to order">${plg.txt}</div> 
            <div act="add2order" id="${prg.id}" cost="${prg.cost}" lbl="${lbl_prg}" title="Click to order">${prg.txt}</div> 
            </div> 
            </div>`;

  },

  GetOrderItem: function(item) {

    return `<div class="order-item" cost="${item.cost}" lbl="${item.lbl}" 
            title="Click to remove">
            <div>${item.lbl}</div><div>$${item.cost}</div></div>`;
  },

  GetOderItem: function(item) {

    return `<div class="order-item" cost="${item.cost}" lbl="${item.lbl}" 
            title="Click to remove">
            <div>${item.lbl}</div><div>$${item.cost}</div></div>`;
  },

  GetOrderDetailsItem: function(item) {

    return `<div class="sd-item-details"><div>${item.lbl}</div>
            <div>$${item.cost}</div></div>`;
  },

  GetAddressSelector: function(id, adrs) {

    let buff = "<option value=\"\" selected=\"selected\">--- Select Address ---</option>";
    adrs.forEach((adr, idx) => {
      buff += `<option value="${idx}">${adr.street}</option>`;
    });

    return `<select id="${id}">${buff}</select>`;
  },

}

**MENU.JS**


var JoesPizza = JoesPizza || {};

JoesPizza.Menu = {
  "items": [

    {
      "type": "Pizza",
      "name": "Cheese",
      "descr": "Marinara sauce topped with whole milk mozzarella cheese.",
      "choices": [{
          "id": "pizza-cheese-lg",
          "size": "Large",
          "cost": 22.99,
          "txt": "Large: $22.99"
        },
        {
          "id": "pizza-cheese-rg",
          "size": "Regular",
          "cost": 18.99,
          "txt": "Regular: $18.99"
        }
      ],
      "img": "/imgs/cheese.png"
    },

    {
      "type": "Pizza",
      "name": "Pepperoni",
      "descr": "Marinara sauce with authentic old-world style pepperoni.",
      "choices": [{
          "id": "pepp-lg",
          "size": "Large",
          "cost": 23.99,
          "txt": "Large: $23.99"
        },
        {
          "id": "pepp-rg",
          "size": "Regular",
          "cost": 19.99,
          "txt": "Regular: $19.99"
        }
      ],
      "img": "/imgs/pepperoni.png"
    },

    {
      "type": "Pizza",
      "name": "Meat Lover's",
      "descr": "Marinara sauce, authentic pepperoni, natural Italian sausage, roasted ham, smoked bacon, pork and beef.",
      "choices": [{
          "id": "meat-lg",
          "size": "Large",
          "cost": 23.99,
          "txt": "Large: $23.99"
        },
        {
          "id": "meat-rg",
          "size": "Regular",
          "cost": 19.99,
          "txt": "Regular: $19.99"
        }
      ],
      "img": "/imgs/meat.png"
    },

    {
      "type": "Pizza",
      "name": "Supreme",
      "descr": "Marinara sauce, pepperoni, pork, beef,fresh mushrooms, fresh green bell peppers and fresh red onions.",
      "choices": [{
          "id": "supr-lg",
          "size": "Large",
          "cost": 23.99,
          "txt": "Large: $23.99"
        },
        {
          "id": "supr-rg",
          "size": "Regular",
          "cost": 19.99,
          "txt": "Regular: $19.99"
        }
      ],
      "img": "/imgs/supreme.png"
    },

    {
      "type": "Wings",
      "name": "Traditional Bone-in",
      "descr": "Classic, juicy bone-in wings served perfectly crispy and tossed in your choice of signature sauce.",
      "choices": [{
          "id": "wings-trad-12",
          "size": "12 Pieces",
          "cost": 11.99,
          "txt": "12 Wings: $11.99"
        },
        {
          "id": "wings-trad-08",
          "size": "8 Pieces",
          "cost": 8.99,
          "txt": "8 Wings: $8.99"
        }
      ],
      "img": "/imgs/wings.png"
    }

  ]
};

**APP.CSS**

.page-top {
  width: 98%;
  max-width: 1200px;
  margin: auto;
  margin-top: 2px;
  height: 64px;
  line-height: 64px;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 4px;
  border: 2px solid darkgrey;
  border-radius: 32px;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
  background: linear-gradient(30deg, green, white, red);
}

.page-top>img:nth-child(1) {
  float: left;
  margin-right: 24px;
}

.page-top>a {
  float: right;
  margin-right: 24px;
  margin-top: 8px;
}

.page-body {
  width: 96%;
  max-width: 1160px;
  margin: auto;
  margin-top: 8px;
  height: auto;
  border: 0px dotted blue;
}


/*
    order.html
*/

.side-left,
.side-right {
  display: inline-block;
  width: 48%;
}


/* left side of the page */

#PizzaMenu {
  height: 480px;
  border-radius: 4px;
  overflow-y: scroll;
  vertical-align: top;
}

#PizzaOrder {
  height: 480px;
  border-radius: 4px;
  vertical-align: top;
  overflow-y: scroll;
}

#PizzaMenu>legend,
#PizzaOrder>legend {
  font-size: 24px;
}


/*
    tell students to group classes next to each other for a given topic
*/

.menu-item {
  border: 2px solid #dcdcdc;
  border-radius: 16px;
  margin-top: 4px;
}

.menu-item>div:nth-child(1) {
  height: 64px;
  line-height: 64px;
  border: 1px dotted transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 16px;
  font-size: 32px;
}

.menu-item>div:nth-child(1)>div {
  display: inline-block;
  height: inherit;
  vertical-align: top;
}

.menu-item>div:nth-child(1)>div>img {
  height: inherit;
  margin-left: 16px;
}

.menu-item>div:nth-child(2) {
  width: 96%;
  margin: auto;
  font-size: 16px;
  border: 1px dotted transparent;
}

.menu-item>div:nth-child(3) {
  text-align: right;
}

.menu-item>div:nth-child(3)>div {
  display: inline-block;
  width: 120px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  text-align: center;
  padding: 4px;
  margin: 4px 16px 4px 0px;
}

.menu-item>div:nth-child(3)>div:hover {
  cursor: pointer;
  background-color: lightgreen;
}


/* right side of the page */

#PizzaOrderSummary {
  width: 80%;
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  margin: auto;
  margin-top: 16px;
  border: 1px solid #aab7b8;
  border-radius: 16px;
  visibility: hidden;
}

#PizzaOrderSummary>div:nth-child(1) {
  display: inline-block;
  width: 48%;
  text-indent: 12px;
}

#PizzaOrderSummary>div:nth-child(2) {
  display: inline-block;
  width: 48%;
  vertical-align: top;
  text-align: right;
}


/* right side */

#PizzaOrderNext {
  width: 60%;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  margin: auto;
  margin-top: 8px;
  border: 1px solid #aab7b8;
  border-radius: 16px;
  visibility: hidden;
}

#PizzaOrderNext:hover {
  cursor: pointer;
  background-color: lightgreen;
}

.order-item {
  width: 98%;
  margin: auto;
  margin-top: 4px;
  height: 24px;
  line-height: 24px;
  font-size: 18px;
  border: 1px solid #aab7b8;
  border-radius: 12px;
}

.order-item:hover {
  cursor: pointer;
  background-color: #f9b2b2;
}

.order-item>div:nth-child(1) {
  display: inline-block;
  width: 80%;
  text-indent: 12px;
}

.order-item>div:nth-child(2) {
  display: inline-block;
  width: 16%;
  margin-right: 8px;
  text-align: right;
}


/*
    submit.html
*/

.submit-delivery {
  border: 2px solid #aab7b8;
  border-radius: 8px;
  height: 520px;
}

.submit-status {
  display: none;
  border: 2px solid #aab7b8;
  border-radius: 8px;
  height: 520px;
}

.sd-order-details,
.sd-address {
  display: inline-block;
  width: 49%;
  border: 0px solid #aab7b8;
  margin-left: 5px;
  height: 520px;
  vertical-align: top;
}


/*
.sd-address {
    display: inline-block;
    width: 49%; 
    height: 520px;
    border: 0px solid #aab7b8;
    margin-left: 5px; 
    
}
*/

.sd-order-details>fieldset,
.sd-address>fieldset {
  height: 500px;
  border-radius: 8px;
}

.sd-order-details legend,
.sd-address legend {
  font-size: 24px;
  margin-left: 14px;
}

.sd-item-details {
  width: 98%;
  height: 24px;
  line-height: 24px;
  font-size: 18px;
  border: 1px solid #aab7b8;
  border-radius: 12px;
  margin-top: 4px;
}

.sd-item-details>div:nth-child(1) {
  display: inline-block;
  width: 75%;
  text-indent: 8px;
}

.sd-item-details>div:nth-child(2) {
  display: inline-block;
  width: 22%;
  text-align: right;
}

.sd-item-details:last-child {
  width: 80%;
  margin: auto;
  margin-top: 16px;
}


/* Address Lines */

.address-lines {
  font-size: 16px;
}

.address-lines>div {
  width: 96%;
  margin: auto;
  margin-top: 12px;
  height: 64px;
  border: 1px solid #aab7b8;
  border-radius: 32px;
}

.address-lines>div:last-child {
  width: 96%;
  margin: auto;
  margin-top: 24px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1px solid #aab7b8;
  border-radius: 24px;
  font-size: 24px;
}

.address-lines>div:last-child:hover {
  cursor: pointer;
  background-color: lightgreen;
}

.address-lines>div>div {
  margin-top: 6px;
}

.address-lines input[type=text] {
  width: 88%;
  margin-left: 5.5%;
}

.address-lines label {
  margin-left: 6%;
}

#AddressSelect {
  line-height: 64px;
  font-size: 24px;
  vertical-align: top;
  margin-top: 0px !important;
}

#AddressSelect>div {
  font-size: 24px;
  width: 88.5%;
  margin-left: 5.5%;
  text-align: center;
}

#AddressSelect>select {
  font-size: 22px;
  width: 88.5%;
  margin-left: 5.5%;
}

#feedbackMsg {
  width: 80%;
  margin: auto;
  height: 96px;
  line-height: 96px;
  text-align: center;
  font-size: 28px;
  border: 2px solid #aab7b8;
  border-radius: 32px;
  margin-top: 128px;
}

#feedbackMsg i {
  color: darkgreen;
}

**SUBMIT.HTML**

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF8" />
  <title>Joe's Pizza</title>
  <link type="text/css" rel="stylesheet" href="/css/app.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="/js/html-templates.js"></script>
  <script type="text/javascript" src="/js/clt-backend.js"></script>
  <script type="text/javascript" src="/js/app.js"></script>
</head>

<body>

  <!-- top banner -->
  <div class="page-top">
    <img src="/imgs/pizza.png" title="Pizza Picture" />
    <span>joe's pizza</span>
    <a href="/">
      <img src="/imgs/home.png"></a>
    <a href="/orders/">
      <img src="/imgs/order.png"></a>
  </div>

  <div class="page-body">

    <!-- submit delivery html frame -->
    <div class="submit-delivery">
      <div class="sd-order-details">
        <fieldset style="overflow-y:scroll;">
          <legend>order details</legend>
          <!-- correct id in js code -->
          <div id="OrderDetails">
          </div>
        </fieldset>
      </div>
      <div class="sd-address">
        <fieldset>
          <legend>delivery address</legend>
          <div id="DeliveryAddress">
            <div class="address-lines">
              <div>
                <div id="AddressSelect">
                </div>
              </div>
              <div>
                <div>
                  <label for="txtStreetAddress">enter street address</label>
                  <input type="text" id="txtStreetAddress" placeholder="exp: 8012 Austin Street" />
                </div>
              </div>
              <div>
                <div>
                  <label for="txtCity">enter city, state</label>
                  <input type="text" id="txtCity" placeholder="exp: Queens, NY" />
                </div>
              </div>
              <div>
                <div>
                  <label for="txtZipCode">enter zip code</label>
                  <input type="text" id="txtZipCode" placeholder="exp: 11415" />
                </div>
              </div>
              <!-- get pizza button -->
              <div id="btnDeliver">Click To Get Pizza</div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>


    <div class="submit-status">
      <div id="feedbackMsg"></div>
    </div>


  </div>

  <script type="text/javascript">
    App.InitSubmit();
  </script>
</body>

</html>

BrowserDebuggerLocalStorage

Answer 1

您将值以字符串格式存储在本地存储中作为

// store order into
let json = JSON.stringify(arr);
localStorage.setItem(App.PendingOrderKey, json);

因此在解析它时，您必须将它转换回 JSON 对象，以便您可以使用它的属性。

你得到的是

let buff = localStorage.getItem(App.PendingOrderKey);

应该是什么

let buff = JSON.parse(localStorage.getItem(App.PendingOrderKey));

它将字符串化对象转换为 JSON 对象。