Geek Answers Handbook

How to save data in a browser with data: URL?

I created a bookmarklet that tries to read and write using localStorage with the following data: url:

 data:text/html;base64,PGRvY3R5cGUgaHRtbD4KPGh0bWw+Cjxib2R5Pgo8c2NyaXB0Pgpsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnY29udGVudCcsICdoZWxsbyB3b3JsZCcpOwpkb2N1bWVudC53cml0ZShsb2NhbFN0b3JhZ2UuZ2V0SXRlbSgnY29udGVudCcpKTsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPg==

This means the following code in the browser:

 <doctype html> <html> <body> <script> localStorage.setItem('content', 'hello world'); document.write(localStorage.getItem('content')); </script> </body> </html>

This code attempts to write the hello world string to the localStorage browser, read the string, and finally write it to the page.

However, this results in the following error:

Uncaught SecurityError: Failed to read property "localStorage" in "Window": storage is disabled inside the URL "data:".

Since this approach does not work, it brings me to the question: how to save data in a browser using data: URL? Is there a different API than localStorage that I could use to store data in data: urls?

EDIT:

Cookies do not work. Attempting to access cookies gives the following error:

Uncaught DOMException: Failed to read the cookie property in the Document: cookies were disabled inside the "data:".

EDIT 2:

The file system API also does not work. Error with error object:

file error

+8
javascript browser html5
source share
7 answers

@charlietfl Creating a simple “notepad” in which I could save text content in a browser even while offline or when the browser restarts.

Having worked using notepad, the following simple solution, which works offline when the browser restarts, is saved on several devices (if you have a common history in different browsers), and you can claim that this is an additional bonus of the version built into .. .

One storage engine that you have is the actual URL, so using it seems like a possible choice. As long as you are happy that the URL will change in this situation, you can 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!

+9
source share

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

+6
source share

Short answer: Its impossible! This is because all storage mechanisms are associated with the source for security reasons. This is necessary so that one page cannot access the data of another. You have no source in the data url, so how should the browser bind the data to your page?

Long answer: You probably do not need this for your use case. I refer to your comment:

@charlietfl Creating a simple “notepad” in which I could save text content in a browser even while offline or when the browser restarts.

It can be archived much easier! Do not use the data URL for this! You are probably storing the data URL as a bookmark, so anyway, the user must access your website to add this bookmark. Use this case to do something else: give the user a regular web page with an application cache manifest . In doing so, you will have a regular page with all the usual capabilities, such as access to localStorage, because you are connected to the source. Thanks to the application cache manifest, this page will never reload. It will withstand restarting the browser and shutting down completely. You just need the Internet on your first visit to install the application.

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

+5
source share

As mentioned in a few comments on your question, local storage is not supported in data: urls. This is the only answer we can give you, because at least for the moment this is the way most browsers handle it.

The reason for this design decision is that the local storage is attached to the original document, so my site cannot access the local storage installed by google.com, etc. In the case of data: the URL there is not the source of any meaningful meaning to the word. file: URLs have local storage in some browsers (I'm sure Firefox, I don't know about Chrome), because the source is at least the local file system. Data: url has no origin, so there is no scheme for sorting its local storage data.

Be that as it may, Chrome has announced that this is the intended behavior, and they are unlikely to change it unless the local storage specification is updated to make it clear, Firefox seems to rely the same, and I don't know about IE, but they probably followed suit.

+1
source share

local storage is not supported in data: URL. if you really want to store data on cookies on the client side, this is the only way to do this.

+1
source share

I used this bookmark as my browser homepage:

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

But it looks like Chrome doesn't allow updating location from URI data pages ...

+1
source share

Saving information locally on a user's computer is a powerful strategy for a developer who creates something for the Internet.

if you are working in a web application, then you have two types of web storage that help store and retrieve data in the client’s browser . these two repositories

1. Local storage
2. Session storage

Both stores support a file containing data for a unique identifier for the URL as an object of a pair of key values. you can use any localStorage () or sessionStorage () storage for this.

a unique URL identifier is created for each user’s browser, so when you try to get data from these repositories, you need this unique URL to get the data. if you do not want to use this unique URL, you can also implement your own combination to create the URL.

These repositories are used for different purposes and have their own functions.

when you store your data in localStorage , you can access it anytime you return after closing the browser by following this unique URL.

In the other hand, when you use sessionStorage to store and retrieve data, you can only access data when you open the browser. when you close the browser, it will clear all your data. and when you return, you will find that nothing exists on this URL. and

Now, an example for storing and accessing data from localstorage.

 var car = {}; car.wheels = 4; car.doors = 4; car.sound = 'Boss'; car.name = 'Audi R8'; localStorage.setItem( 'car', JSON.stringify(car) ); console.log( JSON.parse( localStorage.getItem( 'car' ) ) );

when you try to save and access data, then following the url.

 if(localStorage && localStorage.getItem('car')){ console.log(JSON.parse(localStorage.getItem('car'))); }else{ $.getJSON("http://query.yahooapis.com/xyz?user1",function(data){ if(localStorage){ localStorage.setItem('car',JSON.stringify(data)); } console.log(data); }); }

I hope this gives you an idea of ​​working with web repositories. for more information about storing and accessing data from web storage. Click here..

0
source share

More articles:


All Articles