copying localStorage using javascript

Question

Good Evening Stackoverflow! So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?

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

What is expected result of `function clearNote(){ clear: localStorage.clear(); return false; }`? Where is a key at `localStorage` set to value of `clipboardData`? — guest271314, Jul 14 '17 at 23:05

score 0 · Accepted Answer · answered Jul 14 '17 at 23:14

The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.

copying localStorage using javascript

1 Answers1