我创建了一个小书签，它尝试使用具有以下 data: url 的 localStorage 进行读写:
data:text/html;base64,PGRvY3R5cGUgaHRtbD4KPGh0bWw+Cjxib2R5Pgo8c2NyaXB0Pgpsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnY29udGVudCcsICdoZWxsbyB3b3JsZCcpOwpkb2N1bWVudC53cml0ZShsb2NhbFN0b3JhZ2UuZ2V0SXRlbSgnY29udGVudCcpKTsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPg==
这在浏览器中转换为以下代码:
<doctype html>
<html>
<body>
<script>
localStorage.setItem('content', 'hello world');
document.write(localStorage.getItem('content'));
</script>
</body>
</html>
这段代码尝试将字符串hello world写入浏览器的localStorage，读取字符串，最后写入页面。
但是，这会导致以下错误:
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Storage is disabled inside 'data:' URLs.
由于这种方法行不通，我想到了一个问题:如何使用 data: URL 将数据保存到浏览器？除了 localStorage 之外，还有其他 API 可以用来将数据保存在 data: URL 中吗？
编辑:
Cookie 不起作用。尝试访问 cookie 会出现以下错误:
Uncaught DOMException: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs.
编辑 2:
File system API也不起作用。因错误对象而失败:
最佳答案
@charlietfl Creating a simple "notepad" where I could persist textual content in the browser even when offline or when the browser is restarted.
处理记事本用例，以下是一个简单的解决方案，它可以离线工作，当浏览器重新启动时，在多个设备上持续存在(如果您的历史记录在不同的浏览器之间共享)并且您可以说它带来了额外的好处内置的版本控制......
您可用的一种“存储”机制是实际 url，因此使用它似乎是一个可能的选择。只要您对 url 在这种情况下发生变化感到满意，那么您就可以在以下内容之上进行构建。
<!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>
希望对您有所帮助!
关于javascript - 如何用数据: URL?保存数据到浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37379254/