如何跨设备扩展 localStorage (不带 DB)

共10个回答, 标签: javascript node.js json cookies local-storage

这个赏金已经结束。这个问题的答案有资格获得 500 的声誉奖励。赏金宽限期在 12 小时后结束。Emilio estevez想要引起更多关注对于这个问题:

扩展 localStorage,也许通过.Csv 文件甚至?

目标:扩展我已经实现的localStorage在我的应用程序中,为了更好,我想是非本地的。


我喜欢使用本地存储 API 保存简单用户设置的实现。我在 web 应用程序中为我的需求工作,但唯一的问题是它是正在使用/保存的机器/浏览器的本地。我没有访问一个经典的 MySQL 风格表。我想扩展或调整我的本地存储来延续到其他浏览器; 或者将我的用户设置存储在用户 JS 对象和 JS 对象属性中。

  • 我喜欢与每个用户一起创建 JSON 或 JavaScript 对象的想法,每当有新用户时,取名称,创建对象或object[key]使用名称,并首先使用字段属性默认变量,当用户保存变量时,变量会被填充和/或覆盖。
  • 或者如果以上是不赞成的; 我想保持我的本地存储实现,因为它工作得很好,并找到一个插件/库/扩展在某种程度上,我也可以保存这个并在不同的位置重新渲染; 这已经被认为是以前。虽然我很乐意保留它的客户端; 我对 node.js 解决方案以及 python 解决方案开放,一个简单的数据帧应该足够工作。
  • 使用我的生成文件怎么样localStorage data? Perhaps a .csv file (this is non sensitive data) and have it update as my localStorage是吗?
第1个答案
    I'm adding my two cents here.

导出/导入文件 (JSON 、 XML 、 CSV 、 TSV 等)

导出:

序列化设置并将其作为文件下载。

导入:

打开导出/下载的序列化设置文件。

示例代码:








    设置导出/导入演示




    出口

    复位
要导入的文件:
    导入


        function exportSettings() {
            var json = getSettingsAsJSON();
            var blob = new Blob([json], { type: "application/json" });
            var linkElement = document.createElement("a");

            linkElement.href = URL.createObjectURL(blob);
            linkElement.download = "ThisIsMySettings";

            document.body.appendChild(linkElement);

            linkElement.click();

            document.body.removeChild(linkElement);
        }

        function importSettings() {
            var fileInput = document.getElementById("file-input");

            if (fileInput.files.length > 0) {
                var jsonFile = fileInput.files[0];

                var fileReader = new FileReader();

                fileReader.onload = function (e) {
                    var json = e.target.result;

                    try {
                        var settings = JSON.parse(json);

                        if (settings.hasOwnProperty("userId")) {
                            localStorage["myapp_user_id"] = settings.userId;
                        }

                        if (settings.hasOwnProperty("hello")) {
                            localStorage["myapp_hello"] = settings.hello;
                        }

                        if (settings.hasOwnProperty("data")) {
                            localStorage["myapp_data"] = settings.data;
                        }

                        displaySettings();
                    } catch (ex) {
                        console.error(ex);

                        alert("Error occured while importing settings!");
                    }
                };

                fileReader.readAsText(jsonFile);
            }
        }

        function resetSettings() {
            localStorage["myapp_user_id"] = Math.floor(Math.random() * 100000)   1;
            localStorage["myapp_hello"] = "Hello World!";
            localStorage["myapp_data"] = JSON.stringify([1, 3, 3, 7]);

            displaySettings();
        }

        function displaySettings() {
            var json = getSettingsAsJSON();

            document.getElementById("display").innerText = json;
        }

        function getSettingsAsJSON() {
            return JSON.stringify({
                userId: localStorage["myapp_user_id"],
                hello: localStorage["myapp_hello"],
                data: localStorage["myapp_data"]
            });
        }

        resetSettings();





URL (查询字符串)

导出:

将设置编码为查询字符串,并与当前 URL 结合作为超链接。

导入:

访问包含具有编码设置的查询字符串的超链接,然后 JavaScript 检测并从查询字符串加载设置。


Base64 编码数据

导出:

序列化设置,然后将其编码为 Base64 字符串,然后复制到剪贴板。

导入:

从 cli 粘贴 Base64 字符串

第2个答案
    What about using sqlite?

您的服务器上只有一个文件,如 csv。在客户端更新本地存储后,通过 knex 或类似的方式发送一个 http 请求来更新它。

至少我认为它比 cvs 更好,因为你可以定义几个表,这更容易扩展,更有效,你知道,它是一个数据库。

第3个答案
    You can use a library called localForage which is basically has the same API as localStorage except it allows you to store more complex data structures(arrays, objects) and also supports nodejs style callback,promises and async await.

这里有一个链接存储库 在那里你可以找到示例用法以及如何以你喜欢的方式在项目中实现它。

第4个答案
第5个答案
    Instead of using localstorage, store your user's settings in the InterPlanetary File System (IPFS) https://ipfs.io/

基本上,你会把他们的设置是一个数据格式像 JSON,然后把它写入文件,并把它推到 IPFS。

您将需要一种方法来识别哪些数据被发送到哪个用户。也许你可以使用用户名和密码的散列来命名你的文件或类似的东西。然后,您的用户将始终能够在任何设备上访问他们的内容 (只要他们没有忘记密码)。

第6个答案
    The best way to implement this without using database for sharing data, I believe it to be WebRTC solution based, I thought of it as a way of doing that but I don't have code for it (at least for now), so with some search I found someone already did it (not exactly, but with some tweaks it will be ready) here for example, and its part of this article webrtc without a signaling server

这里还有一个来源:数据通道基本示例演示

在 github 上:数据通道基本示例

WebRTC 不仅用于视频/音频聊天,还可用于文本消息和文本编辑中的协作。

这个解决方案甚至在其中一个答案中提到这里.

第7个答案
    Use cookies or have a downloadable file that users can take with them to load in when they access another browser. You can do this with a text, JSON, or JavaScript file with object data.
第8个答案
    You can use Redis. It is an in-memory data structure store, used as a database. You can store your data in key pair formats. It also makes your application fast and efficient.
第9个答案
    Obviously the best approach is to use a database. However, if you're inclined to using a database then a possible best approach is to use a combination of techniques which I believe you already touched on so I'll help you connect the dots here.

需要的步骤:

  1. 本地存储 API(因为它已经部分为你工作)。
  2. 构建一个节点或 Python (或您喜欢的) 端点来获取和发布设置数据。
  3. 在 API 服务器上创建一个 userSettings.JSON 文件。

说明:

您将使用您的 localStorage 与您现在使用它的方式相同 (当前工作状态)。

为了在不同的设备上移动或拥有用户设置,用户设置.JSON 文件 (作为文档数据库) 将用于存储和导入用户设置。

如果 localStorage 中不存在用户设置,您的 API 端点将用于获取用户设置。更新设置后,更新您的本地存储,然后使用端点在 userSettings.JSON 文件中发布/更新新设置。

您的 API 端点将仅用于维护 (读取和写入) userSettings.JSON 文件。您需要一个方法/函数来创建、更新或删除文件中的设置。正如您可能已经知道的,JSON 文件格式与 MongoDB 数据库没有太大不同。在这种情况下,您只是创建管理文件所需的方法。

我希望这有所帮助!

第10个答案
    You can resolve this without a database, but I wouldn't recommend it. Basically you have (user, localStorage) pairs and when a given user identifies himself/herself, his/her localStorage should be provided in a way. You can tell users to store their local storages at their own machine, but then they will have to copy it to other machines, which is labor-intensive and will never gain popularity. One could manually run a Javascript chunk in the console of their browser to make sure that localStorage has their data and having to copy the localStorage accross machines is only slightly easier than doing manually the whole thing.

您可以将本地存储信息编码到 URL 中,但是除了 URL 长度的问题之外,这可能会成为一个问题和一直存在的编码问题, 您的整个本地存储可以由第三方监控,可以访问您的路由器。我知道你说过数据不敏感,但我相信你认为它不敏感然而。但是一旦用户使用这个,如果方便的话,他们也会存储敏感数据,或者,你的客户可能会有这样的任务给你, 或者甚至你可能意识到你需要在那里存储不是 100% 公开的数据。

除此之外,在实践中,你将面临非常严重的同步问题,也就是说,让本地存储不可知论是很好的,但是,真正的版本是什么?如果您定期处理 10 个不同的会话,那么同步本地存储将成为一个难题。这意味着 localStorage 需要有时间戳。

因此,您将需要一个中心位置,一个服务器来存储上次保存的 localStorage 版本。如果由于一些未知的原因,数据库避免了您,您可以将 localStorages 存储在识别用户的文件中,如

Johndoe.json

然后,您需要实现一个导出功能,该功能将用户的当前 JSON 发送到服务器,并将其保存到文件和导入功能中, 这将下载为用户存储的文件,并确保 localStorage 得到相应的更新。您也可以同时执行这两个操作,实现同步。

到目前为止,这很简单,但是如果用户已经在他/她的本地存储和服务器上有一些有用的数据呢?最简单的方法是用另一个覆盖一个,但是哪一个呢?如果我们正在导入,那么本地的会被覆盖,如果导出,那么服务器上的会被覆盖,如果我们同步,那么旧的会被覆盖。

但是,在某些情况下,您希望合并同一用户的两个本地存储,因此:

新元素

我认为,如果一个元素是新的,应该以某种方式知道它是在本次会议中创建的,这有助于了解, 因为这意味着在我们要合并的另一个会话中,这个新项目没有被删除,因此添加它是直观的。

元素变化

如果同一元素在两种情况下不同,则以较新版本为准。

移除元素

有趣的情况是,在一个会话中,它被删除,在另一个会话中,它被更新。在这种情况下,我认为更新的变化应该占上风。


然而,尽管你尽了最大努力,用户仍然可能会把事情搞砸 (还有你的软件),所以在你的服务器上备份每个会话是有意义的。

相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? Node 服务器将 Http 响应代码400返回到 Java 为什么按键搜索对象中的值的速度比在 js 中使用 "in" 要慢? 如何监控 RXJS 订阅数量? 如何通过拆分字符串将数组转换为对象? JSON 响应对于 int 值总是返回零 在数组中每个值的中间插入值 如何跨设备扩展 localStorage (不带 DB) 如何修复 “将 SameSite cookie 设置为无” 警告?铬扩展 我有一个 javascript 计时器,但我希望计时器继续即使我刷新或重新启动浏览器 本地存储的任何替代方法,用于在页面刷新时保存复选框选择