如何在 vue 中使用 cookie 保存计算器中的数据？

Question

我无法在 vue.js 中很好地使用 cookies。我想在历史记录的另一页上显示数据。

如何在 vue.js 中使用 cookies 保存计算器中的数据？

代码：

<template>
      <html>
        <body>
          <div id="app">
            <div class="container">
              <div class="calculator">
                <div class="answer">{{ answer }}</div>
                <div class="display">{{ logList + current }}</div>
                <div @click="clear" id="clear" class="btn operator">C</div>
                <div @click="sign" id="sign" class="btn operator">+/-</div>
                <div @click="percent" id="percent" class="btn operator">
                  %
                </div>
                <div @click="divide" id="divide" class="btn operator">
                  /
                </div>
                <div @click="append('7')" id="n7" class="btn">7</div>
                <div @click="append('8')" id="n8" class="btn">8</div>
                <div @click="append('9')" id="n9" class="btn">9</div>
                <div @click="times" id="times" class="btn operator">*</div>
                <div @click="append('4')" id="n4" class="btn">4</div>
                <div @click="append('5')" id="n5" class="btn">5</div>
                <div @click="append('6')" id="n6" class="btn">6</div>
                <div @click="minus" id="minus" class="btn operator">-</div>
                <div @click="append('1')" id="n1" class="btn">1</div>
                <div @click="append('2')" id="n2" class="btn">2</div>
                <div @click="append('3')" id="n3" class="btn">3</div>
                <div @click="plus" id="plus" class="btn operator">+</div>
                <div @click="append('0')" id="n0" class="zero">0</div>
                <div @click="dot" id="dot" class="btn">.</div>
                <div @click="equal" id="equal" class="btn operator">=</div>
              </div>
            </div>
          </div>
        </body>
      </html>
    </template>

我不能在 vue.js 中很好地使用 model。我想在历史的另一页上展示数字发生了什么。

这是我的脚本：

<script>
    export default {
      data() {
        return {
          logList: '',
          current: '',
          answer: '',
          operatorClicked: true,
        }
      },
      methods: {
        append(number) {
          if (this.operatorClicked) {
            this.current = ''
            this.operatorClicked = false
          }
          this.current = `${this.current}${number}`
        },
        addtoLog(operator) {
          if (this.operatorClicked == false) {
            this.logList += `${this.current} ${operator} `
            this.current = ''
            this.operatorClicked = true
          }
        },
    
        clear() {
          this.current = ''
          this.answer = ''
          this.logList = ''
          this.operatorClicked = false
        },
        sign() {
          if (this.current != '') {
            this.current =
              this.current.charAt(0) === '-'
                ? this.current.slice(1)
                : `-${this.current}`
          }
        },
        percent() {
          if (this.current != '') {
            this.current = `${parseFloat(this.current) / 100}`
          }
        },
        dot() {
          if (this.current.indexOf('.') === -1) {
            this.append('.')
          }
        },
        divide() {
          this.addtoLog('/')
        },
        times() {
          this.addtoLog('*')
        },
        minus() {
          this.addtoLog('-')
        },
        plus() {
          this.addtoLog('+')
        },
        equal() {
          if (this.operatorClicked == false) {
            this.answer = eval(this.logList + this.current)
          } else {
            this.answer = 'wrong!'
          }
        },
      },
    }
    </script>

Answer 1

 mounted() {
    if (localStorage.data) {
      this.data = JSON.parse(localStorage.data);
    }
  },
  watch: {
    data(newData) {
      localStorage.data = newData;
    }
  }

你可以做这样的事情来将你的数据保存在本地存储中，然后在页面刷新时加载它。 或者您可以将观察者移动到方法中，并通过“保存”按钮触发它。

如何在 vue 中使用 cookie 保存计算器中的数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-03-04 03:23:52

如何在 vue 中使用 cookie 保存计算器中的数据？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-03-04 03:23:52

解决方案1
0 已采纳 2022-03-04 03:23:52