頁面重新加載后保留錯誤數組

Question

我現在正在嘗試建立一個人生成的所有二維碼的歷史記錄，將代碼保存到本地存儲，然后循環訪問本地存儲並在頁面上顯示這些代碼。

我希望創建代碼的日期顯示在代碼旁邊，作為“項目符號”。

所以我試圖在 Javascript 中創建一個多維數組，其中包含一個包含鍵值屬性的 object，其中鍵是日期，但是當我 output 這個鍵在頁面上使用時我得到的文字字符串 'today' 應該是我打算擁有的 'dd/mm/yyyy' 日期。 @OhGodWhy，也許您可以在這里提供幫助？

index.html//

    <!DOCTYPE html>
    <html>
    <head>
    <title>QR Code Generator</title>
    <link rel="stylesheet" type="text/css" media="screen" 
    href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" media="screen" 
    href="css/styles.css">
    <script type="text/javascript" href="js/bootstrap.js"></script>
    </head>
    <body>
    <div class="container">
        <div id="input-form">
            <h1>QR Code Generator</h1>
            <div class="row qr_code">
                <span v-show="errors" class="error">
                Please ensure that at least one of the form fields is filled 
    in.
                </span>
            </div>
            <form class="row qr_code">
                <div class="col-sm-3">
                    <input v-on:click="generate_url" class="btn btn-success" 
    value="Generate QR Code">
                </div>
                <div class="col-sm-3">
                    <label for="url-link" name="url-link">URL:</label>
                    <input type="text" v-model="url" id="url-link" 
    class="url-link">
                </div>
                <div class="col-sm-3">
                    <label for="pixel_size" name="pixel_size">Pixels: 
   </label>
                    <input type="text" v-model="pixel_size" id="pixel_size" 
    class="pixel_size">
                </div>
                <div class="col-sm-2">
                    <label for="transparent" name="transparent">Transparent? 
   </label>
                    <input type="checkbox" v-model="transparent" 
    id="transparent" class="transparent" true-value="transparent" false- 
   value="">
                </div>
                <div class="col-sm-1">
                    <select v-on:change="on_change(this.value)" v- 
   model="image_type" class="dropdown">
                        <option value="png">PNG Image</option>
                        <option value="svg">SVG Image</option>
                    </select>
                </div>
            </form>
            <div class="row generated-code">
                <div class="col-sm-12">
                    <p class="generated-code">Generated Code: <span v- 
   show="show_url" class="generated-qr-code">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h2>QR Code History</h2>
                    <ul v-for="(url in url_log">
                        <li>{{ url }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"> 
   </script>
    <script src="app.js"></script>
    </body>
    </html>

// 應用程序.js

    const app = new Vue({
      el: '#input-form',
      data: {
    url: "",
    pixel_size: "",
    transparent: "",
    image_type: "",
    show_url: false,
    errors: false,
    url_log: []
      },
       methods: {
    generate_url: function(){
        if (!this.url && !this.pixel_size && !this.transparent && 
    !this.image_type){
          this.errors = true;
      } else {
        this.show_url = true;
        var url = 'https://qrtag.net/api/qr_' + this.transparent + '_' + 
    this.pixel_size + '.' + this.image_type + '?url=' + this.url;
        localStorage.setItem('url', url);
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 
    0!
        var yyyy = today.getFullYear();

        today = mm + '/' + dd + '/' + yyyy;
        if (localStorage.getItem('url')){
          this.url_log.push({today: localStorage.getItem('url')});
        }
        console.log(this.url_log);
      }
    },
    on_change: function(value){
      console.log(value);
    }
      },
      mounted() {
    console.log('App mounted!');

     }
    });

Answer 1

您可以使用簡單的本地存儲解決方案將它們臨時存儲在那里。 但是請注意，您應該同時處理它的創建和清理。 下面你可以看到一個簡單的例子：

methods: {
  synchronize_errors: (field, name) {
    const errors = localStorage.getItem('errors') || {}

    errors[field] = name

    localStorage.setItem('errors', errors)
  }
}

然后你可以在指定的方法中使用它：

mounted: function () {
  const errors = localStorage.getItem('errors') || {}

  Object.keys(errors).forEach((field) => {
    this.errors.push(errors[error])
  })
}

現在清理有點困難，但你可以做一些簡單的事情：

beforeDestroy: function () {
  localStorage.removeItem('errors')
}

頁面重新加載后保留錯誤數組

問題描述

1 個解決方案

解決方案1
0 2020-05-20 17:11:25

頁面重新加載后保留錯誤數組

問題描述

1 個解決方案

解決方案1 0 2020-05-20 17:11:25

解決方案1
0 2020-05-20 17:11:25