使用javascript复制localStorage

时间:2017-07-14 23:02:12

标签: javascript html5 local-storage

晚安Stackoverflow! 所以我遇到了一个问题,我正在尝试使用javascript创建一个笔记应用程序,我想玩localStorage。我尝试了几个选项,但我似乎无法选择所有选项,然后将localStorage复制到剪贴板,还有其他人在此之前运行吗?

    <!DOCTYPE html>
    <html>
    <head>
     <title>NotePad</title>
     <style>
      body {
        font-family: Tahoma;
        line-height: 1.6em;
        background: #f4f4f4;
      }

      header, footer {
        text-align: center;
      }
       #container {
         width: 400px;
         margin: 50px auto;
         background: #FFFFa5;
         overflow:hidden;
         padding: 30px;
       }

       .clear {
         text-decoration: none;
         background: #333;
         color: #fff;
         padding: 10px;
       }

       .copy {
        text-decoration: none;
        background: #333;
        color: #fff;
        padding: 10px;
      }
    </style>

    <script>
      function getNote(){
        if(localStorage.getItem('note')){
          var note = localStorage.getItem('note');
        } else {
          var note = 'Go ahead and edit this note to save in local storage';
        }

        document.getElementById('note').innerHTML = note;
      }
      function saveNote(id){
        var note = document.getElementById('note').innerHTML;
        localStorage.setItem('note', note);
      }

      function clearNote(){
        clear: localStorage.clear();
        return false;
      }

      function copyNote(){
        $("#note").select();
        document.execCommand("copy");
        return false;
      }

    </script>
  </head>
  <body>
    <header>
      <h1>My Notes!</h1>
    </header>

    <section id="container">
      <div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
    </section>

    <footer>
      <div>
        <a href="" onclick="javascript:clearNote();" class="clear">Clear Note</a>
      </div>
      <br>
      <div>
        <a href="" onclick="javascript:copyNote()" class="copy">Copy</a>
      </div>
      <p>MyNote &copy; 2017</p>
    </footer>

    <script>
      getNote();
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

select方法不选择文本。它触发该元素上的select事件(假装用户自己选择了该元素),并且因为select元素没有事件处理程序,所以没有任何反应。 This question应该可以帮助您创建一个选择文本的函数。