How to save data to the browser with data: URL?

You can use Blob() , URL.createObjectURL()

<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      var html = "<!doctype html>\
                   <html>\
                     <body>\
                       <script>\
                         localStorage.setItem('content', 'hello world');\
                        document.write(localStorage.getItem('content'));\
                      <\/script>\
                     </body>\
                   </html>"
      , blob = new Blob([html], {
        type: "text/html"
      })
      , url = window.URL.createObjectURL(blob)
      , a = document.getElementById("bookmark");
      a.href = url;
    }
  </script>
</head>
<body>
  <a id="bookmark" target="_blank">click</a>
  </body>
</html>

plnkr http://plnkr.co/edit/EyzUwJrlgD7GTNWnfjwe?p=preview


Short answer: Its not possible! This is because all storage mechanisms are bound to the origin for security reasons. This is required so that one page can not access the data of another. In a data URL you don't have an origin, so how should the browser bound the data to your page?

Long answer: You probably don't need it for your use case. I refer you comment:

@charlietfl Creating a simple "notepad" where I could persist textual content in the browser even when offline or when the browser is restarted.

This can be archived much easier! Don't use a data URL for this! Probably you store the data url as a bookmark, so either way once the user need to access your website to add this bookmark. Use that occasion to do something else: Give the user a normal webpage with an Application Cache Manifest. With that you will have a normal page with all the usual abilities like access to the localStorage because you are bound to an origin. Thanks to the Application Cache Manifest this page will never reload. It will survive a browser restart and works completely offline. You just need internet on the first visit to install the app.

This is supported by all major browsers, and for your simple use-case easy to implement!


@charlietfl Creating a simple "notepad" where I could persist textual content in the browser even when offline or when the browser is restarted.

Working off the notepad use case, the following is a simple solution which works offline, when the browser restarts, persists across multiple devices (if you have your history shared across your different browsers) and you could argue comes with the added bonus of versioning built in...

One 'storage' mechanism you have available is the actual url so using it seems like a possible choice. As long as your happy for the url to change in this situation then you could build on top of the following.

<!doctype html>
<html>
<body>
<div id="editable" contenteditable="true">
    My notepad!
</div>
<script>
    document.getElementById('editable').addEventListener('blur', function (event) {
        window.location = 'data:text/html;base64,' + btoa(document.documentElement.outerHTML);
    });
</script>
</body>
</html>

Hope this help!


I used to use this bookmarklet as my browser's homepage:

data:text/html, <body contenteditable onblur="window.location='data:text/html;base64,'+btoa(document.documentElement.outerHTML);"/>

But Chrome does not seem to allow updating location from within data uri pages...

Tags:

Javascript

Html

Browser

Recent Posts