本地存儲僅存儲我的部分數據，會話存儲中未存儲任何內容

Question

我是一名學生，我正在為一門課程建立一個網站。 這是網站中的 js、html 和 css 頁面。 當我運行這個程序時，它將街道地址保存在本地存儲中，但不保存城市和郵政編碼。 我不明白為什么會這樣。 會話存儲中根本沒有顯示任何內容。 我附上了 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>

瀏覽器調試器本地存儲

Answer 1

您將值以字符串格式存儲在 localstorage 中

// 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 對象。

Answer 2

我想通了我做了什么。 讓 city = $("txtCity").val(); 讓 zcode = $("txtZipCode").val(); 它應該在“txtCity”和“txtZipCode”中有一個#，這個代碼是app.js。

App.js 代碼：

PrePostOrder：函數（）{

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