Javascript 如何使用data:URL将数据保存到浏览器？
我创建了一个bookmarklet，它尝试使用Javascript 如何使用data:URL将数据保存到浏览器？,javascript,html,browser,Javascript,Html,Browser,我创建了一个bookmarklet，它尝试使用localStorage读取和写入以下数据：url: data:text/html;base64,PGRvY3R5cGUgaHRtbD4KPGh0bWw+Cjxib2R5Pgo8c2NyaXB0Pgpsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnY29udGVudCcsICdoZWxsbyB3b3JsZCcpOwpkb2N1bWVudC53cml0ZShsb2NhbFN0b3JhZ2UuZ2V0SXRlbSgnY29udGVudCcpKT
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>
setItem（'content'，'helloworld'）；
document.write（localStorage.getItem（'content'））；
hello world由于这种方法不起作用，它给我带来了一个问题：如何使用
data:localStoragedata:正如在您的问题的一些评论中提到的，数据：URL中不支持本地存储。这是我们能给你的唯一答案，因为至少目前大多数浏览器都是这样处理的 之所以做出这样的设计决定，似乎是因为本地存储与文档的来源有关，因此我的网站无法访问google.com设置的本地存储等。就数据而言：URL没有任何有意义的来源。文件：URL在某些浏览器中启用了本地存储（我相信Firefox是肯定的，我不知道Chrome），因为URL的来源至少是本地文件系统。数据：url没有来源，因此没有对其本地存储数据进行排序的方案
目前，Chrome已经宣布这是预期的行为，除非本地存储规范更新为明确表示不支持，否则他们不太可能改变它。Firefox似乎也在以同样的方式学习，我不知道IE，但他们很可能也会这样做。数据：URL不支持本地存储。如果您真的想将数据存储到客户端集cookies，这是唯一的方法。您可以使用
window.onload=函数（）{
var html=”\
\
\
\
setItem（'content'，'helloworld'）\
document.write（localStorage.getItem（'content'））\
\
\
"
，blob=新的blob（[html]{
键入：“text/html”
})
，url=window.url.createObjectURL（blob）
，a=document.getElementById（“书签”）；
a、 href=url；
}
简短回答：这是不可能的！这是因为出于安全原因，所有存储机制都绑定到源。这是必需的，以便一个页面无法访问另一个页面的数据。在数据URL中，您没有原点，那么浏览器应该如何将数据绑定到您的页面
详细回答：您的用例可能不需要它。我请你发表评论：
@charlietfl创建了一个简单的“记事本”，即使在脱机或重新启动浏览器时，我也可以将文本内容保存在浏览器中
这可以更容易地存档！不要为此使用数据URL！可能您将数据url存储为书签，因此无论哪种方式，只要用户需要访问您的网站以添加此书签。利用这个机会做些别的事情：给用户一个普通的网页，上面有一个。这样，您将拥有一个普通页面，其中包含所有常见功能，如访问本地存储，因为您绑定到一个源。由于应用程序缓存清单，此页面将永远不会重新加载。它将在浏览器重新启动后继续运行，并完全脱机工作。您只需在第一次访问时使用internet即可安装该应用程序
这是支持所有主要浏览器，并为您的简单用例易于实现 对于正在为Web创建内容的开发人员来说，在用户的计算机上本地存储信息是一个强大的策略
如果您使用的是web应用程序，那么您有两种类型的web存储，这有助于在客户端浏览器中存储和检索数据。
这两个存储器是
1。本地存储
2.会话存储
这两个存储都维护一个文件，该文件以键值对的对象形式包含每个唯一URL ID的数据。为此，您可以使用任何存储localStorage（）或sessionStorage（）
对于每个用户，浏览器都会创建一个唯一的URL ID，因此当您试图从这些存储中检索数据时，需要使用此唯一的URL来检索数据。如果您不想使用这个唯一的url，您还可以实现自己的自定义组合来生成url
这些存储用于不同的目的&它们有自己的功能
当您将数据存储在localStorage中时，您可以在关闭浏览器后的任何时候访问该特定的唯一URL
另一方面，当您使用会话存储存储和检索数据时，您只能在浏览器打开时访问数据。关闭浏览器时，将清除所有数据。当你回来的时候，你会发现这个URL上什么都不存在。及
现在，从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' ) ) );
当您尝试按照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);
});
}
我希望它能给你一个处理网络存储的想法。有关从存储和访问数据的详细信息
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);
});
}
<!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>
data:text/html, <body contenteditable onblur="window.location='data:text/html;base64,'+btoa(document.documentElement.outerHTML);"/>