JavaScript Bookmarklet: Save Any Page to Your Reading List

Bookmarklets are tiny snippets of JavaScript code that run directly in your browser when you click on them. They offer a powerful way to automate and streamline tasks while browsing. In this post, we’ll build a bookmarklet that saves any page you’re visiting to your personal reading list using either localStorage or a custom API endpoint.

Whether you’re a productivity-driven developer or someone who simply likes to organize web content, this tool will quickly become a valuable asset in your toolbox. Let’s dive in.

1. What is a Bookmarklet and Why Use It?

A bookmarklet is a small JavaScript program stored as a URL in a bookmark. When clicked, it executes the code on the currently active page. Bookmarklets are client-side, require no installation, and run instantly. Our reading list saver can help you store URLs for later reading or syncing to a centralized database.

For example, rather than copying and pasting URLs into a document or note-taking app, you’ll simply click the bookmarklet and have it auto-save the page details.

2. Writing the JavaScript Logic

We’ll start by writing the base logic of the code that captures the current URL, title, and timestamp.

function savePageToReadingList() {
  const page = {
    title: document.title,
    url: window.location.href,
    savedAt: new Date().toISOString(),
  };

  let readingList = [];
  try {
    readingList = JSON.parse(localStorage.getItem('readingList')) || [];
  } catch (err) {
    console.error('Failed to parse reading list:', err);
  }

  readingList.push(page);
  localStorage.setItem('readingList', JSON.stringify(readingList));
  alert('Page saved to your reading list!');
}

This function stores the current page in a reading list in localStorage. We’re using JSON.parse and JSON.stringify to handle linked-list structures.

3. Converting to a Bookmarklet

Now that we have working JavaScript, let’s transform it into a bookmarklet. We’ll minify the function and prepend it with javascript: so the browser knows to execute it.

javascript:(function(){
  const page={title:document.title,url:window.location.href,savedAt:new Date().toISOString()};
  let list=[];
  try{list=JSON.parse(localStorage.getItem('readingList'))||[]}catch(e){}
  list.push(page);
  localStorage.setItem('readingList',JSON.stringify(list));
  alert('Page saved!');
})();

To use it, simply create a new bookmark in your browser, paste this code into the URL field, and name it something like “📘 Save to Reading List”.

4. Sending Data to a Backend API (Optional)

If you’re building a more robust solution, you can POST the page data to a backend server or an API endpoint. Here’s a version that uses the fetch API.

javascript:(function(){
  const page={title:document.title,url:window.location.href,savedAt:new Date().toISOString()};
  fetch('https://your-api.com/save',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify(page)
  }).then(()=>{alert('Page sent to API!');})
  .catch(err=>{alert('Error saving page');console.error(err)});
})();

This version assumes you have an API endpoint ready to accept this data. Be sure to handle authorization (e.g., API keys or JWT tokens) securely when using authenticated endpoints.

5. Retrieving and Viewing Saved Pages

Storing the data is only half the equation—now let’s look at how to access it later. You can build a simple HTML page that reads from localStorage and renders the list:

<!doctype html>
<html>
<body>
  <ul id="list"></ul>
  <script>
    const list = JSON.parse(localStorage.getItem('readingList')) || [];
    const ul = document.getElementById('list');
    list.forEach(page => {
      const li = document.createElement('li');
      const link = document.createElement('a');
      link.href = page.url;
      link.textContent = `${page.title} (saved at ${new Date(page.savedAt).toLocaleString()})`;
      link.target = '_blank';
      li.appendChild(link);
      ul.appendChild(li);
    });
  </script>
</body>
</html>

This gives you a basic UI to browse saved pages right from your browser or desktop. You could add timestamp filters, search, or export options with just a bit more JavaScript.

6. Extra Tips and Best Practices

Minify: Use a minifier like javascript-minifier.com to shrink your bookmarklet code.
Escape Characters: Avoid syntax that might conflict with URL encoding (quotes, newlines).
Storage Limits: localStorage maxes out at around 5MB—switch to IndexedDB or backend storage for scale.
Security: If using an API endpoint, consider CORS and authentication.
Cross-Browser: Most modern browsers support bookmarklets, but remember that some built-in security policies (like on mobile Safari) might restrict them.

Conclusion

With just a few lines of JavaScript, you’ve built a portable, extensible tool to save any webpage into a structured reading list. Whether you store it locally or send it to an API, bookmarklets offer a unique blend of simplicity and power. Try extending it to capture additional metadata, tags, or even categorize saved pages.

Next time you stumble on a great article, blog, or tutorial, don’t lose it—just click your trusty bookmarklet and store it for later!

Useful links: