A bookmarklet that saves and edits the memo associated with the url in the browser.

url-sticky.js

/**
 * Copyright (c) 2022 hidao80
 * Released under the MIT license
 * https://opensource.org/licenses/mit-license.php
*/
/*
README
========

url-sticky

Usage
-------

- When you enter a key, each character you type is saved in localStorage
  (in your browser).
- Each domain will have a different storage area.
- If you run it again while the sticky notes are visible,
  the sticky notes will be hidden. Content is preserved.
- If you press the `Esc` key while the focus is on the sticky note,
  the sticky note will be hidden.
- You can paste and save not only plain text but also HTML and CSS formatted
  data.

Contoributers
---------------

@hidao80
@magasine

*/
(function() {
    // First 8 characters of md5 hash of "url-sticky" is "10b58878"
    const ELEMENT_ID = "sticky_10b58878";
    const STORAGE_KEY = "url-sticky contents";
    const STYLE = {
        "background-color": "lightyellow",
        "transition": "width 0.5s",
        "border": "2px solid black",
        "border-radius": "15px",
        "box-shadow": "10px 10px 10px gray",
        "color": "black",
        "height": "90vh",
        "width": "20vw",
        "position": "fixed",
        "top": "10px",
        "right": "10px",
        "z-index": "99999",
        "padding": "15px",
        "margin": "0",
        "overflow": "auto",
    };
    let div = document.getElementById(ELEMENT_ID);

    // Show stickies if they are not displayed
    if (!div) {
        // Creating and styling sticky elements
        div = document.createElement("div");
        div.setAttribute("id", ELEMENT_ID);
        for (const prop in STYLE) {
            div.style[prop] = STYLE[prop];
        }
        div.contentEditable = "true";
        div.innerHTML = localStorage.getItem(STORAGE_KEY);
        document.body.appendChild(div);
        div.focus();

        // Saves in real time as it is entered
        div.addEventListener("keydown", function(e) {
            e.cancelBubble = true;
            localStorage.setItem(STORAGE_KEY, div.innerHTML);
            
            // If the escape key is pressed, save and then hide the sticky
            if (e.key == "Escape") {
                div.remove();
            }
        });

        div.addEventListener("paste", function(e) {
            e.cancelBubble = true;
            localStorage.setItem(STORAGE_KEY, div.innerHTML);
        });
    } else {
        // Hide stickies when called again while displaying stickies
        div.remove();
    }
})();

url-sticky_bookmarklet

javascript:(function(){const e="sticky_10b58878",t="url-sticky contents",o={"background-color":"lightyellow",transition:"width 0.5s",border:"2px solid black","border-radius":"15px","box-shadow":"10px 10px 10px gray",color:"black",height:"90vh",width:"20vw",position:"fixed",top:"10px",right:"10px","z-index":"99999",padding:"15px",margin:"0",overflow:"auto"};let n=document.getElementById(e);if(n)n.remove();else{n=document.createElement("div"),n.setAttribute("id",e);for(const e in o)n.style[e]=o[e];n.contentEditable="true",n.innerHTML=localStorage.getItem(t),document.body.appendChild(n),n.focus(),n.addEventListener("keydown",function(e){e.cancelBubble=!0,localStorage.setItem(t,n.innerHTML),"Escape"==e.key&&n.remove()}),n.addEventListener("paste",function(e){e.cancelBubble=!0,localStorage.setItem(t,n.innerHTML)})}})();

// I suggest adding small pieces of code to add toggle functionality

(function () {
   if (!document.getElementById("id_sticky")) {
      style = {
         "background-color": "lightyellow",
         "color": "black",
         "height": "100vh",
         "width": "20vw",
         "position": "fixed",
         "top": "0",
         "right": "0",
         "z-index": "99999",
         "padding": "4px",
      };
      div = document.createElement('div');
      div.setAttribute("id", "id_sticky");
      elem = div.style;
      for (var prop in style) {
         elem[prop] = style[prop];
      }
      div.contentEditable = "true";
      document.body.appendChild(div);
      div.innerHTML = localStorage.getItem('url-sticky contents');

      div.addEventListener('keydown', function (e) {
         localStorage.setItem('url-sticky contents', div.innerHTML);
      });
   } else {
      div.remove();
   }
})();

@magasine
Oh, that's a very good idea! 👍
Let's do that.
Thank you very much!

// Small beautification additions to style attributes, for a nicer layout

(function () {
   if (!document.getElementById("id_sticky")) {
      style = {
         "background-color": "lightyellow",
         "transition": "width 2s",
         "border": "2px solid black",
         "border-radius": "15px",
         "box-shadow": "10px 10px 10px gray",
         "color": "black",
         "height": "90vh",
         "width": "20vw",
         "position": "fixed",
         "top": "10px",
         "right": "10px",
         "z-index": "99999",
         "padding": "15px",
         "margin": "0px",
         "overflow": "auto",
         "opacity": "1",
      };
      div = document.createElement('div');
      div.setAttribute("id", "id_sticky");
      elem = div.style;
      for (var prop in style) {
         elem[prop] = style[prop];
      }
      div.contentEditable = "true";
      document.body.appendChild(div);
      div.innerHTML = localStorage.getItem('url-sticky contents');

      div.addEventListener('keydown', function (e) {
         localStorage.setItem('url-sticky contents', div.innerHTML);
      });
   } else {
      div.remove();
   }
})();

@magasine
This is beautiful!
Very nice, isn't it? 👍 I will definitely do so.

The bookmarklet is now registered in the bookmark bar with the name :memo:(:memo:).

I have created a web app that allows you to add favicons with emoji to a bookmarklet.
I added favicon to this bookmarklet as well, and use it with just the icon displayed on the bookmark bar. It is very good.

https://hidao80.github.io/emoji-favicon-bookmarklet-maker/