Question

为使我无法将代码发布到jsfeedle，这是我的提供程序或jsfeedle的问题-它不允许我保存代码。所以我在这里发布代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>test</title>

</head>
<body>
    <div id="app">
     <input v-model="message" @keyup.enter.native="pressed">
    </div>

</body>

    <script>
        new Vue({
          el: '#app',
          data: {
            message: ''
          },

            created()
              {
                document.onkeydown=function(e)
                  {
                    var key=window.event.keyCode;
                    if(key==113){
                      console.log('F2 pressed save')
                      localStorage.message = this.message;
                      console.log("recovered value: ", this.message)
                    }

                    if(key==115){
                      console.log('F4 restore')
                      // this.message = localStorage.message;
                      this.message = "444";

                    }

                  }

            }

            })

    </script>

</html>

我无法恢复的问题通过按键（在我的情况下为F4）保存到本地存储数据中。

upd：此处为实时示例https://jsbin.com/wiqezuheji/edit?html,js,output

Answer 1

在localStorage中保存和检索变量的方式与您尝试的方式有些不同。正确的语法是：

// Get something from the localStorage
localStorage.getItem('item_name_here');

// Set something in the localStorage
localStorage.setItem('item_name_here', value);

// Remove something from the localStorage
localStorage.removeItem('item_name_here');

// Clear the entire localStorage
localStorage.clear();

所以您的情况应该是

// Saving the message in the localStorage
localStorage.setItem('message', this.message);

// Retrieving the message from the localStorage
this.message = localStorage.getItem('message');

有关更多信息，请查看at the documentation

修改

这里以工作JSFiddle为例

这是一个有效的JS Bin示例

Answer 2

document.addEventListener("keydown", function);

尝试

localStorage.setItem('message', this.message);

在localStorage中设置和

this.message = localStorage.getItem('message');

从本地存储中获取

无法从本地存储还原数据不起作用

2 个答案: