文章/答案/技术大牛

发布

社区首页 >问答首页 >页面重载后的持久错误数组

问页面重载后的持久错误数组
EN

Stack Overflow用户

提问于 2020-05-21 00:06:36

回答 1查看 34关注 0票数 0

我现在正在尝试建立一个人已经生成的所有二维码的历史记录，将代码保存到本地存储，然后循环通过本地存储并在页面上显示这些代码。

我希望代码创建的日期出现在代码旁边，作为“项目符号”。

所以我试图在Javascript中创建一个多维数组，包含一个包含键值属性的对象，其中键是日期，但是当我使用变量‘date’作为保存日期的键在页面上输出时，我得到的文字字符串‘date’应该是我想要的'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>

// app.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!');

     }
    });

vue.js

javascript

html

回答 1

Stack Overflow用户

发布于 2020-05-21 01:11:25

您可以使用简单的本地存储解决方案将它们临时存储在那里。不过，请注意，您应该同时处理创建和清理。下面是一个简单的例子：

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')
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61917695

复制

相似问题

问页面重载后的持久错误数组
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面重载后的持久错误数组EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面重载后的持久错误数组
EN