标签: web-storage

我的网络应用程序的用户请求“离线模式”，在互联网连接不可用时将他们的工作存储在硬盘上。他们可能会离线几分钟到几周，因此为了防止工作丢失，我需要能够持久保存数据，即使在存储压力下（在没有适当权限的情况下使用 IndexedDB 可能会导致数据丢失）。

我在 Google Developers 上读到，异步navigator.storage.persist()方法可用于请求用户存储文件的权限，但这在 Chrome 上不起作用 - 承诺总是返回false而不提示用户。

然后我在这里读到Chrome 可能决定不显示权限弹出窗口，而是根据预先计算的决定授予或拒绝持久存储权限。这似乎是基于以下几点：

• 该网站已添加书签（并且用户有 5 个或更少的书签）
• 该网站具有很高的网站参与度
• 该网站已添加到主屏幕
• 该网站已启用推送通知

如果上述任何一项为真，则已授予该权限，否则将自动拒绝。navigator.storage.persist()这意味着在 Chrome 中，和之间没有区别navigator.storage.persisted()，尽管第一个应该是权限请求，第二个应该是权限检查。

我已经构建了用于请求持久存储权限的应用程序内 UI，因此我需要的是一种可靠的方法来让权限弹出窗口显示在 Chrome 中，以便用户可以授予或拒绝该权限。由于我无法控制前三个条件，或合理地要求用户满足它们，似乎我唯一的选择是请求显示推送通知的权限，这很不幸，因为这不是我需要的权限，而且我拥有没有兴趣显示推送通知。类似的权限请求可能会让用户感到困惑。

有没有更清晰、用户友好的方式来获得在 Chrome 中使用持久存储的权限？

对于HTML5网络存储和应用程序缓存,我很慢但肯定会疯狂.

这是我的例子:http: //daviddarx.com/stuffs/work/custom/54/

缓存清单在http://manifest-validator.com/上有效并经过测试:http://daviddarx.com/stuffs/work/custom/54/cache.manifest

由于它不起作用,我采用了一个非常简单的工作示例,然后尝试逐步添加我的部分代码和数据,添加少量,然后我再次测试它.

当我从简单的例子开始,一切都很好.如果我将我的iPhone置于平面模式,我在启动网站时会收到一条离线消息,但随后我可以查看结果.

当我添加一些我的资产(页面中的HTML代码,1-2个图像等)时,它仍然有效.

如果我然后添加更多的资源(例如,css和所有关联的图像),问题就开始了...如果我进入平面模式然后打开页面,我会得到正常的消息(我得到的是正确的消息)工作),然后另一条消息,要求我重试或取消.如果我取消,该网站只是不显示和应用程序关闭,如果我按下重试按钮,我会一次又一次得到相同的消息....

我真的不知道该怎么做.每次我都会在测试之前验证我的缓存清单,每次我更改URL以确保所有内容都重置.

这是否与缓存文件的重量有关？是否有大小或文件的限制？

另一句话:在测试之前,我总是在计算机的控制台中检查我的页面,以确保它不是一个明显的问题.实际上,每次尝试都会在桌面浏览器上获得成功,并加载所有资产.

你知道那可能来自哪里吗？

编辑:我再次做了很多测试,仍然无法让它工作.

以下是情况的摘要:

1. 这是我正在测试的版本:http://daviddarx.com/stuffs/work/custom/61/

2.这是我的缓存清单:http://daviddarx.com/stuffs/work/custom/61/manifest.appcache 根据http://manifest-validator.com/完全有效.

3.当我在chrome(桌面)上加载页面并在控制台显示时,一切正常.所有元素都被缓存,如果我刷新,缓存就可以了.

4.当我在桌面chrome上加载页面并查看网络面板时,我可以看到所有内容都是从缓存中加载的.没有丢失的文件.

5.当我从任何互联网断开我的台式电脑时,它正在工作!如果我在没有任何连接的情况下使用chrome浏览网站,我可以显示页面,一切都很好,我希望它可以在我的Iphone上.

6.当我第一次使用我的iPhone并访问网站时,一切正常.移动safari控制台中没有任何错误.如果我打开"平面模式"并返回safari,我可以显示我所在的页面(我之前无法实现).但是,如果我尝试更改页面,它只是警告我"无法打开页面",然后取消请求.我只能留在当前页面上.

在我的台式电脑上,一切都很完美,但它只是在我的Iphone上工作.

你有什么主意吗？你能在桌面和iPhone浏览器上试试吗？

我想在 java 脚本中缓存来自 Web api 响应的大对象。我有两个选择，要么将其存储在浏览器会话存储中，要么让一些变量保存响应。我知道会话存储具有持续到会话关闭的一些优势，但除此之外，使用会话存储还有其他好处吗（例如对浏览器内存的影响）？

我正在尝试将blob通过AJAX检索的数据(favicon)保存到localStorage.

代码:

var xhr = new XMLHttpRequest();
xhr.open('GET', 
'http://g.etfv.co/http://www.google.com',
true);
xhr.responseType = "blob";
xhr.onload = function(e){ //Stringify blob...
    localStorage['icon'] = JSON.stringify(xhr.response);
    //reload the icon from storage
    var fr = new FileReader();
    fr.onload = 
        function(e) {
            document.getElementById("myicon").src = fr.result;
        }
    fr.readAsDataURL(JSON.parse(localStorage['icon']));
    }
xhr.send(null);

代码在此处进行了改编,只需稍作修改即可使用localStorage.localStorage将所有数据保存为字符串,因此blob需要在保存之前以某种方式进行字符串化.

JSON 不会将blob作为其支持类型之一处理,因此这段代码失败并不奇怪.

有没有办法让blob进入localStorage？

因此，在我的Angular 1.5应用程序中，我也想保留页面加载时的数据，

所以我正在使用$window.localStorage。

我正在从中读取一些价值localStoarge，它也可以正常工作incognito mode。

The page refreshes and yet the values are retained。

if($window.localStorage.selectedServers !== undefined)
    selectedObj = JSON.parse($window.localStorage.selectedServers);

问题是

当我复制网址并在隐身的新标签页中打开时，

在 localStorage 得到不确定的。

如何摆脱这个问题？还是我做错了什么？

从 WebView 文档中，它说：

1. setDatabaseEnabled设置是否启用数据库存储 API。
2. setDomStorageEnabled设置是否启用DOM 存储 API。

所以我想问一下什么是数据库存储API，什么是DOM存储API？它们的区别是什么？

我正在尝试将Web应用程序从"传统的"基于cookie的身份验证机制切换到纯粹基于令牌的身份验证机制.一旦客户端收到令牌,就应该缓存该令牌以减少开销.存储令牌的最佳方法是什么？

这是我从谷歌搜索中学到的:

我研究的第一个有希望的途径是浏览器会话存储,但据我所知,即使跨标签也不会共享,这意味着如果用户使用新标签跟踪网站的链接,他们将不得不登录再次.

还有本地存储,但是我希望用户在关闭浏览器时自动注销,而且我对存储中的令牌也感到有些不安,即使我将它们在服务器端到期.它看起来似乎不洁净.

另一种方法是将令牌存储在会话cookie中,这意味着它会在浏览器关闭时被杀死,并且可以跨选项卡共享.这几乎是理想的,除了cookie当然会在每次去服务器的时候通过线路发送,如果可能的话我想避免.尽管这不是安全问题,但通过cookie以及HTTP Authorization标头发送它似乎是多余的.我已经考虑过将cookie路径设置为我域上不存在的路径,但这不仅仅是美的一个缩影......

因此,面对三个非最佳解决方案,我再次求助于SO.你们是怎么做到的？什么是最好的方式？

tl; dr在单页面Web应用程序中持久化身份验证令牌的规范方法是什么？

我想使用HTML和javascript构建一个基于脱机浏览器的应用程序，以在Android平板电脑上收集调查数据。该应用程序将包含一些静态页面，这些页面具有供用户输入数据的表单，然后可以使用Web Storage或IndexedDB将其存储在本地。但是，我也想构建一个小的本机Android应用程序，它将获取这些数据并将其传输到其他设备。这有可能吗，如果可以的话，我将如何处理呢？

具体来说，我想了解本机应用程序是否以及如何访问浏览器的数据存储（我可以管理其余部分）。我更喜欢使用Android浏览器，但是可以使用其他任何浏览器，如果这样可以简化操作。我发现这篇博客文章暗示可能，但我希望您能得到一些有关Android浏览器存储数据的位置以及其他应用程序可以多么轻松地访问数据的指示。

我有一些来自不同控制器的数据，这些数据使用https://github.com/fredricrylander/angular-webstorage存储在 sessionStorga 中。数据存储正常并且在当前会话中可用。我面临的问题是制作一个控制器来观察 webstorage.session 中的变化，我是这样做的：

app.controller(
    'updateDataController',
    ['$scope','$http','$sce','$location','$routeParams', '$rootScope', '$document', 'webStorage', '$interval', 'md5',
        function($scope,$http,$sce,$location,$routeParams, $rootScope, $document, webStorage, $interval, md5) {

            $scope.mySessionStorage = webStorage.session;

            $scope.$watch('mySessionStorage', function (newVal, oldVal) {
                 console.log("The web storage has changed");
            }, true);

        }
    ]);

我只得到一次 console.log 输出。即使我更改了 webStorage.session 的内容，我也没有收到任何日志。可能是什么问题呢？

我使用 auth0 进行身份验证，因此在进行身份验证时，用户将被重定向到另一个域 auth0 域，然后重定向回我的 Web 应用程序。

如果我在用户单击身份验证链接之前在会话存储中保存了一些内容，假设用户仍然在同一个窗口和选项卡中，那么当用户重定向回我的应用程序时，该值是否仍然存在？