Question

我创建了一个试图用localStorage读取和写入以下data:网址的书签：

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：无法阅读＆＃39; localStorage＆＃39;来自＆＃39; Window＆＃39;的属性：在数据中禁用存储：＆＃39;网址。

由于这种方法不起作用，它引出了一个问题：如何使用data: URL将数据保存到浏览器？我可以使用localStorage之外的其他API来保存data:网址中的数据吗？

修改

Cookie不起作用。尝试访问cookie会出现以下错误：

未捕获DOMException：无法读取＆＃39; cookie＆＃39;来自＆＃39;文件＆＃39;：Cookie被禁用的内容＆＃39;数据：＆＃39;网址。

编辑2：

File system API也不起作用。失败的错误对象：

Answer 1

@charlietfl创建一个简单的“记事本”，即使在离线或重新启动浏览器时，我也可以在浏览器中保留文本内容。

使用记事本用例，以下是一个简单的解决方案，可以在浏览器重新启动时脱机工作，在多个设备上保持不变（如果您的历史记录在不同的浏览器中共享），您可以争辩说有额外的奖励内置的版本控制......

您可以使用的一个“存储”机制是实际网址，因此使用它似乎是一种可能的选择。只要您愿意在这种情况下改变网址，那么您就可以构建以下内容。

<!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>

希望这有帮助！

Answer 2

您可以使用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

Answer 3

简答：不可能！这是因为出于安全原因，所有存储机制都绑定到源。这是必需的，以便一个页面无法访问另一个页面的数据。在数据网址中，您没有来源，那么浏览器应该如何将数据绑定到您的网页？

答案很长：您的用例可能不需要它。我推荐你评论：

@charlietfl创建一个简单的＆＃34;记事本＆＃34;即使在离线或重新启动浏览器时，我也可以在浏览器中保留文本内容。

这可以更容易存档！不要使用数据网址！您可能将数据网址存储为书签，因此一旦用户需要访问您的网站以添加此书签，就可以这样做。使用该场合做其他事情：为用户提供一个Application Cache Manifest的普通网页。有了这个，您将拥有一个普通的页面，其中包含访问localStorage等所有常用功能，因为您已绑定到原点。感谢Application Cache Manifest，这个页面永远不会重新加载。它将在浏览器重启后继续运行并完全脱机。您只需在首次访问时安装互联网即可安装该应用。

所有主流浏览器都支持此功能，并且您的简单用例易于实现！

Answer 4

正如您对问题的一些评论中所提到的，数据中不支持本地存储：网址。这是我们能给你的唯一答案，因为至少目前这是大多数浏览器处理的方式。

设计决策的原因似乎是因为本地存储与文档的来源有关，因此我的网站无法访问google.com等设置的本地存储空间。如果是数据：网址没有任何有意义的意义上的起源。 file：urls在某些浏览器中启用了本地存储（我相信Firefox肯定，我不了解Chrome），因为它的起源至少是本地文件系统。数据：url没有来源，因此没有用于对其本地存储数据进行排序的方案。

目前看来，Chrome已宣布这是预期的行为，除非本地存储规范更新为明确说明，否则他们不太可能更改它，Firefox似乎倾向于同样的方式，我不会＆＃39了解IE，但他们可能会效仿。

Answer 5

数据：urls不支持

本地存储。如果你真的想将数据存储到客户端设置cookie，这是唯一的方法。

Answer 6

我曾经将此书签用作浏览器的主页

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

但是Chrome似乎不允许从数据uri页面中更新位置...

Answer 7

为什么不使用 0x0 图像来查询 HTTPS 源，该源只是将查询字符串中的数据存储到 cookie，以便您可以通过加载基于 cookie 内容的动态脚本文件来检索它？如果该源缓存自身，它将脱机运行。

Answer 8

在用户计算机上本地存储信息对于为Web创建内容的开发人员来说是一种强大的策略。

如果你在网络应用程序上工作，那么你有两种类型的网络存储空间，它可以帮助你存储＆amp;在客户端浏览器中检索数据。这两个存储是

<强> 1。本地存储
2.会话存储

两个存储都维护一个文件，该文件包含按键值对的对象形式的每个唯一URL ID的数据。为此，您可以使用任何存储 localStorage（）或 sessionStorage（）。

为每个用户浏览器创建唯一的URL ID，因此当您尝试从这些存储中检索数据时，您需要使用此唯一URL来检索数据。如果您不想使用此唯一网址，您还可以实施自己的自定义组合来生成网址。

这些存储用于不同目的＆amp;有自己的特色。

当您将数据存储在 localStorage 中时，您可以在关闭浏览器后按照该特定唯一网址随时访问。

另一方面，当您使用 sessionStorage 进行商店＆amp;检索数据然后只有在浏览器打开时才能访问数据。关闭浏览器时，它将清除您的所有数据。当你回来时，你会发现该网址上没有任何内容。和

现在，商店＆amp; amp;从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' ) ) );

当你试图存储＆amp;然后按照网址访问数据。

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);
     });
}

我希望它会给你一个处理网络存储的想法。有关商店和商店的更多信息从Web存储访问数据。 click here..

如何使用数据将数据保存到浏览器：URL？

8 个答案: