首页 > 解决方案 > 刷新页面后保留LocalStorage

问题描述

目前,我输入数据,它存储在本地存储中并相应地显示。这是该流程的代码:

创建/设置数据(在 create.js 文件中)

let orders = [];
document.onreadystatechange = function () {
    if (document.readyState === 'interactive') renderApp();

    function renderApp() {
        var onInit = app.initialized();
        onInit.then(getClient).catch(handleErr);

        function getClient(_client) {
            window.client = _client;
            //client.events.on('app.activated', onAppActivate1);
            onAppActivate1();
        }
    }
};

   function onAppActivate1() {
    
        //intialize an array that will have all the keys user puts in 
        console.log('got here');
        $("#btnCreateOrder").click(function () {
            //orders = localStorage.getItem('orderlist');
            let order = {
                id: Date.now(),
                order: document.getElementById('order').value,
                name: document.getElementById('inputName').value,
                date: document.getElementById('inputDate').value,
                status: document.getElementById('inputStatus').value
            }
            orders.push(order);
            if (!localStorage.getItem('orderlist') || JSON.parse(localStorage.getItem('orderlist')).length === 0) {
                $window.localStorage.setItem('orderlist', JSON.stringify($scope.initData));
            }
            //localStorage.setItem('orderlist', JSON.stringify(orders));
            client.instance.send({
                message: {
                    orders: orders
                }
            });
            client.instance.close();
        });
    }
    
    function handleErr(err) {
        console.log('Error Occuered', err);
    }

接收/显示数据 (app.js)

function onAppActivate() {
  //var displayID = new Array();
  console.log("Hi!! We are in the app!");
  client.instance.resize({ height: "350px" });
  client.instance.receive(function (event) {
    var data = event.helper.getData();
    console.log("data is", data);
    for (let i = 0; i < data.message.orders.length; ++i) {
      console.log(data.message.orders.length);
      const orderList = data.message.orders[i];
      console.log("orderlist is ", orderList);
      var order = document.createElement("div");
      order.innerHTML = `<br/> Order#:  ${orderList.order}<br/> Name: ${orderList.name}<br/>
       Date: ${orderList.date}  <br/> Status: ${orderList.status}`;
      order.style.borderBottom = "1px solid black"
      document.getElementById('orderhistory').appendChild(order);
    }
  })

当我刷新应用程序时,我的数据会保留,但是当我重新加载浏览器时,数据会被重置,但我希望数据保留,即使我重新加载浏览器并继续附加它

标签: javascripthtmllocal-storage

解决方案


推荐阅读