How can I save data from my calculator with cookie in vue?-CodePudding

I cant work with cookies well in vue.js. I want to show data on another page in history.

How can I save data from my calculator with cookies in vue.js ?

Code :

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

I cant work with model well in vue.js. I want to show what happened to numbers on another page in history.

This is my script :

<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>

CodePudding user response：

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

You could do something like this to save your data in local storage, and then load it on a page refresh. Or you can move the watcher into method and have it be triggered by "save" button.