Javascript 本地存储仅存储部分数据，会话存储中未存储任何内容

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

**APP.JS** 变量应用={ 菜单：空， 订单成本总计：0， PendingOrderKey:PendingOrder， UsedAddresses键：UsedAddresses， DeliveryAddressKey:DeliveryAddress， AddressIDSelected:null， 更新周期：4000， OrderStatus:[已取消，已下订单，我们正在为您准备食物，在烤箱/烹饪中，外出送货]， Init：函数{ this.Menu=JoesPizza.Menu； $PizzaOrderNext.clickthis.OrderNext； }, InitSubmit：函数{ 这是LoadOrderDetails； 这个.LoadOrderAddress； }, 加载菜单：功能{ $MenuItemList.html； this.Menu.items.forEachitem=>{ 让html=HtmlCode.getMenuItem； $MenuItemList.appendhtml； }; //将单击事件附加到新菜单项 让选择器=div[act=\add2order\]； $selector.clickfunction{ //从单击的菜单项读取值 设lbl=$this.attrlbl； 让成本=$this.attrcost； App.OrderCostTotal+=parseFloatcost； //html订单项目 让html=HtmlCode.GetOrderItem{ lbl:lbl， 成本：成本 }; $pizzaorditems.appendhtml； App.OnAddUpdateOrderTotal； //在订单项目上附加单击事件 //添加删除方法；这可以改进 $.order-item.offclick； $.order-item.clickfunction{ 让成本=$this.attrcost； App.ordercostotal-=parseFloatcost； App.OnRemoveUpdateOrderTotal； $this.remove； }; }; }, OnAddUpdateOrderTotal:函数{ //需要纠正 让选择器='PizzaOrderSummary，PizzaOrderNext'； $selector.cssvisibility，可见； 让total=$+App.ordercostotal.toFixed2； 选择器=PizzaOrderSummary>div:nth-child2； $selector.htmltotal； }, OnRemoveUpdateOrderTotal:函数成本{ //需要纠正 如果$.order-item.length==1{ 让选择器=PizzaOrderSummary，PizzaOrderNext； $selector.cssvisibility，隐藏； 返回false； }否则{ 让total=$+App.ordercostotal.toFixed2； 让选择器=PizzaOrderSummary>div:nth-child2； $selector.htmltotal； 返回true； } }, OrderNext：函数{ 如果$.order-item.length==0{ 您的订单似乎有问题。； 返回false； } //阅读订单信息 设arr=[]； var合计=0； $.order-item.eachidx，item=>{ 设lbl=$item.attrlbl； 让成本=$item.attrcost； arr.push{ lbl:lbl， 成本：成本 }; }; //将订单存储到 让json=json.stringifyarr； localStorage.setItemApp.PendingOrderKey，json； //移动到提交页面 // https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage window.location.assign/submit/； }, LoadOrderDetails:函数{ 让buff=localStorage.getItemApp.PendingOrderKey； 让order=JSON.parsebuff； order.forEachitem=>{ App.ordercostotal+=parseFloatitem.cost； 让html=HtmlCode.GetOrderDetailsItemitem； $OrderDetails.appendhtml； }; 让数据={ lbl：总成本：， 成本：App.ordercostotal.toFixed2 }; 让html=HtmlCode.GetOrderDetailsItemdata； $OrderDetails.appendhtml； }, LoadOrderAddress:函数{ 让buff=localStorage.getItemApp.UsedAddressKey； 如果buff==null{ 让html=输入发送比萨饼的地址； $AddressSelect.htmlhtml； }否则{ 让adrs=JSON.parsebuff； 设html=HtmlCode.getAddressSelectorSelderLader，adrs； $AddressSelect.htmlhtml； /*附加事件*/ $SelDelAdr.changefunction{ App.AddressIDSelected=parseInt$this.val； 设adr=adrs[App.AddressIDSelected]； $txtStreetAddress.valadr.street； $txtCity.valadr.city； $txtZipCode.valadr.zcode； }; } 让选择器=.address lines>div：最后一个子级； $selector.clickApp.PrePostOrder； }, 前置器：函数{ /*读取地址信息*/ let street=$txtStreetAddress.val； 让城市=$txtCity.val； 设zcode=$txtZipCode.val； /*家庭作业…验证地址信息*/ 如果！App.validateAddressDatastreet，城市，zcode{ 请更正地址信息。； 返回false； } /*创建并存储配送地址*/ 设adr={ 街:街,， 城市:城市,， zcode:zcode }; localStorage.setItemApp.DeliveryAddressKey，JSON.stringifyadr； /*缓存地址*/ App.CacheCurrentAddressadr； /* 在这里，我们准备向乔的比萨店提交我们的比萨订单 我们隐藏当前帧并显示状态帧 http://api.jquery.com/fadeout/ */ $.submit-delivery.fadeOut500，=>{ $.submit-status.fadeIn500，=>{ App.PostOrder； } }; }, CacheCurrentAddress:FunctionalDR{ 如果App.AddressIDSelected！=null 返回false； 让buff=localStorage.getItemApp.UsedAddressKey； 让arr=buff？JSON.parsebuff:[]； 如果App.isAddressCachedar，adr 返回false； arr.pushadr； buff=JSON.stringifyarr； localStorage.setItemApp.UsedAddressesKey，buff； }, IsAddressCached:functionarr，adr{ 设rval=false； let street=adr.street.trim； 对于让idx进入arr{ 让buff=arr[idx].street.trim； 如果buff==街道{ rval=真； 打破 } } 返回rval； }, 验证数据：functionstreet、城市、zcode{ 设rval=true； /* 检查传递的值是否为null、未定义或空字符串 如果拒绝…返回false； rval=false */ /*如果街道！=&&city！=&&zcode！==null{ 返回rval； }否则{ rval=假； */ 返回rval； /* } */ }, 后序：函数{ /*发出邮购通知*/ 让order=localStorage.getItemApp.PendingOrderKey； 让addr=localStorage.getItemApp.DeliveryAddressKey； /*下单*/ let backend=new ClientBackend； backend.PostOrderorder，addr，msg=>{ 让orderid=parseIntmsg； 如果医嘱ID{ $feedbackMsg.html`您的订单ID:${orderid}`； /*开始监视订单状态*/ setIntervalApp.MonitorOrderStatus、App.RefreshCycle、orderid； }否则{ $feedbackMsg.htmlmsg； } }; }, MonitorOrderStatus:functionorderid{ let backend=new ClientBackend； backend.MonitorOrderStatusorderid，scode=>{ 让status=App.OrderStatus[parseIntscode]； 设dts=new Date.toLocaleTimeString； 让msg=`您的订单ID:${orderid}；${status}；${dts}`； $feedbackMsg.htmlmsg； }; } } 函数newFunction{ 返回SelDelAdr； } **HTML-TEMPLATE.JS** 变量HtmlCode={ GetMenuItem:functionitem{ 设plg=item.choices[0]； 设prg=item.choices[1]； 设lbl_plg=`${item.type}-${item.name}-${plg.size}`； 让lbl_prg=`${item.type}-${item.name}-${prg.size}`； 返回` ${item.name} ${item.descr} ${plg.txt} ${prg.txt} `; }, GetOrderItem:functionitem{ 返回` ${item.lbl}$${item.cost}`； }, GetOderItem:functionitem{ 返回` ${item.lbl}$${item.cost}`； }, GetOrderDetailsItem:functionitem{ 返回`${item.lbl} $${item.cost}`； }, GetAddressSelector:functionid，adrs{ 让buff=--选择地址--； adrs.forEachadr，idx=>{ buff+=`${adr.street}`； }; 返回`${buff}`； }, } **MENU.JS** var JoesPizza=JoesPizza | |{}； JoesPizza.菜单={ 项目：[ { 类型：比萨饼， 名字：奶酪， 描述：涂有全脂马苏里拉奶酪的玛丽娜沙司。， 选择：[{ id:pizza cheese lg， 尺寸：大， 费用：22.99美元， txt:Large:$22.99 }, { id:pizza cheese rg， 尺码：普通， 费用：18.99美元， txt:普通版：$18.99 } ], img:/imgs/cheese.png }, { 类型：比萨饼， 名字：意大利香肠， 描述：玛丽娜拉沙司配上正宗的旧世界风格的意大利香肠。， 选择：[{ id:pepp lg， 尺寸：大， 费用：23.99美元， txt:Large:$23.99 }, { id:pepp rg， 尺码：普通， 费用：19.99美元， txt:普通版：$19.99 } ], img:/imgs/pepperoni.png }, { 类型：比萨饼， 名称：肉食爱好者， 描述：玛丽娜酱、正宗意大利香肠、天然意大利香肠、烤火腿、熏肉、猪肉和牛肉。， 选择：[{ id:meat lg， 尺寸：大， 费用：23.99美元， txt:Large:$23.99 }, { id:肉， 尺码：普通， 费用：19.99美元， txt:普通版：$19.99 } ], img:/imgs/meat.png }, { 类型：比萨饼， 姓名：Supreme， 描述：意大利辣酱、意大利香肠、猪肉、牛肉、新鲜蘑菇、新鲜青椒和新鲜红洋葱。， 选择：[{ id:supr lg， 尺寸：大， 费用：23.99美元， txt:Large:$23.99 }, { 编号：supr rg， 尺码：普通， 费用：19.99美元， txt:普通版：$19.99 } ], img:/imgs/supreme.png }, { 类型：机翼， 名称：传统骨科 , 描述：经典的、多汁的鸡翅骨，完美的酥脆，加入你选择的特色酱汁。， 选择：[{ 识别号：wings-trad-12， 尺码：12件， 费用：11.99美元， txt:12个翅膀：$11.99 }, { id:wings-trad-08， 尺码：8件， 费用：8.99美元， txt:8个翅膀：$8.99 } ], img:/imgs/wings.png } ] }; **APP.CSS** .页首{ 宽度：98%； 最大宽度：1200px； 保证金：自动； 边缘顶部：2倍； 高度：64px； 线高：64px； 字体大小：48px； 字体大小：粗体； 字母间距：4px； 边框：2倍实心暗灰色； 边界半径：32px； /* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */ 背景：线性梯度30度，绿色，白色，红色； } .page top>img:nth-child1{ 浮动：左； 右边距：24px； } .页面顶部>a{ 浮动：对； 右边距：24px； 边缘顶部：8px； } .页体{ 宽度：96%； 最大宽度：1160px； 保证金：自动； 边缘顶部：8px； 高度：自动； 边框：0px点蓝色； } /* order.html */ .左侧， .右边{ 显示：内联块； 宽度：48%； } /*页面左侧*/ 比萨饼菜单{ 高度：480px； 边界半径：4px； 溢出y：滚动； 垂直对齐：顶部； } 比萨饼订单{ 高度：480px； 边界半径：4px； 垂直对齐：顶部； 溢出y：滚动； } 比萨饼菜单>图例， 比萨饼订单>图例{ 字体大小：24px； } /* 告诉学生就某一特定主题将课程分组 */ .菜单项{ 边框：2个实心DCDC； 边界半径：16px； 利润上限：4倍； } .菜单项>div:n-child1{ 高度：64px； 线高：64px； 边框：1个透明点； 背景重复：无重复； 背景尺寸：包含； 背景位置：16px； 字体大小：32px； } .菜单项>div:n-child1>div{ 显示：内联块； 身高：继承； 垂直对齐：顶部； } .菜单项>div:n-child1>div>img{ 身高：继承； 左边距：16像素； } .菜单项>div:nth-child2{ 宽度：96%； 保证金：自动； 字体大小：16px； 边框：1个透明点； } .菜单项>div:nth-child3{ 文本对齐：右对齐； } .菜单项>div:n-child3>div{ 显示：内联块； 宽度：120px； 边框：1px实心DCDC； 边界半径：4px； 文本对齐：居中； 填充：4px； 保证金：4PX16PX4PX0PX； } .菜单项>div:n-child3>div:hover{ 光标：指针； 背景颜色：浅绿色； } /*页面右侧*/ 比萨饼订单摘要{ 宽度：80%； 高度：32px； 线高：32px； 字体大小：24px； 保证金：自动； 边缘顶部：16px； 边框：1px实心aab7b8； 边界半径：16px； 可见性：隐藏； } PizzaOrderSummary>div:n-child1{ 显示：内联块； 宽度：48%； 文本缩进：12px； } PizzaOrderSummary>div:nth-child2{ 显示：内联块； 宽度：48%； 垂直对齐：顶部； 文本对齐：右对齐； } /*右侧*/ 比萨饼{ 宽度：60%； 高度：40px； 线高：40px； 字体大小：20px； 文本对齐：居中； 保证金：自动； 边缘顶部：8px； 边框：1px实心aab7b8； 边界半径：16px； 可见性：隐藏； } PizzaOrderNext：悬停{ 光标：指针； 背景颜色：浅绿色； } .订购物品{ 宽度：98%； 保证金：自动； 利润上限：4倍； 高度：24px； 线高：24px； 字号：18px； 边框：1px实心aab7b8； 边界半径：12px； } .订单项：悬停{ 光标：指针； 背景色：f9b2b2； } .订单项目>部门：第n-child1{ 显示：内联块； 宽度：80%； 文本缩进：12px； } .订单项目>部门：第n-child2{ 显示：内联块； 宽度：16%； 右边距：8px； 文本对齐：右对齐； } /* submit.html */ .提交交付{ 边框：2px实心aab7b8； 边界半径：8px； 高度：520px； } .提交状态{ 显示：无； 边框：2px实心aab7b8； 边界半径：8px； 高度：520px； } .sd订单详情， .sd地址{ 显示：内联块； 宽度：49%； 边框：0px实心aab7b8； 左边距：5px； 高度：520px； 垂直对齐：顶部； } /* .sd地址{ 显示：内联块； 宽度：49%； 高度：520px； 边框：0px实心aab7b8； 左边距：5px； } */ .sd订单详细信息>字段集， .sd地址>字段集{ 高度：500px； 边界半径：8px； } .sd订单详细信息图例， .sd地址图例{ 字体大小：24px； 左边距：14px； } .sd项目详细信息{ 宽度：98%； 高度：24px； 线高：24px； 字号：18px； 边框：1px实心aab7b8； 边界半径：12px； 利润上限：4倍； } .sd项目详细信息>部门：第n-child1{ 显示：内联块； 宽度：75%； 文本缩进：8px； } .sd项目详细信息>部门：N-child2{ 显示：内联块； 宽度：22%； 文本对齐：右对齐； } .sd项目详细信息：最后一个子项{ 宽度：80%； 保证金：自动； 边缘顶部：16px； } /*地址线*/ .地址线{ 字体大小：16px； } .地址行>div{ 宽度：96%； 保证金：自动； 边缘顶部：12px； 高度：64px； 边框：1px实心aab7b8； 边界半径：32px； } .地址行>分区：las t-child{ 宽度：96%； 保证金：自动； 利润上限：24px； 高度：48px； 线高：48px； 文本对齐：居中； 边框：1px实心aab7b8； 边界半径：24px； 字体大小：24px； } .地址行>div:最后一个子项：悬停{ 光标：指针； 背景颜色：浅绿色； } .地址行>分区>分区{ 边缘顶部：6px； } .地址行输入[类型=文本]{ 宽度：88%； 左缘：5.5%； } .地址线标签{ 左缘：6%； } 地址选择{ 线高：64px； 字体大小：24px； 垂直对齐：顶部； 边际顶部：0px！重要； } 地址选择>div{ 字体大小：24px； 宽度：88.5%； 左缘：5.5%； 文本对齐：居中； } 地址选择>选择{ 字体大小：22px； 宽度：88.5%； 左缘：5.5%； } 反馈味精{ 宽度：80%； 保证金：自动； 高度：96px； 线高：96px； 文本对齐：居中； 字号：28px； 边框：2px实心aab7b8； 边界半径：32px； 边缘顶部：128px； } 反馈味精i{ 颜色：深绿色； } **SUBMIT.HTML** 乔的比萨饼 乔的比萨饼 订单详情 送货地址 输入街道地址 进入城市、州 输入邮政编码 点击获取比萨饼 App.InitSubmit；

---

您以字符串格式将值存储在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对象。

我知道我做了什么。让城市=$txtCity.val；设zcode=$txtZipCode.val；它应该在txtCity和txtZipCode中有一个。这个代码可以在app.js中找到

App.js代码：

前置器：函数{

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

---

想一想这么多的代码真的很难。如果你能尽可能地减少代码，那就太好了。通常问题会在你经历这个过程时自行解决。是的，我正试图准确地思考社区需要从我编写的代码中得到什么，而不会感到困惑，同时仍然能够连接所有e点。谢谢MyiEye的帮助。订单详细信息没有继续，地址选择器也不见了。我注意到在屏幕截图上我发布的DeliveryAddressKey缺少[]，但其他两个键都有[]。你好，我知道我做了什么。let city=$txtCity.val；let zcode=$txtZipCode.val；它应该在txtCity和txtZipCode中有一个。此代码在app.js中找到。谢谢suzan的回答。