Как распространить localStorage на устройства (без БД) - PullRequest
Новая
       48

Как распространить localStorage на устройства (без БД)

10 голосов
/ 12 февраля 2020

Цель: расширить мои уже реализованные localStorage в моем приложении, чтобы быть хорошо, не локально, я думаю.

Мне нравится реализация сохранения простых пользовательских настроек с помощью API локального хранилища. У меня это работает для моих нужд в веб-приложении, но единственная проблема заключается в том, что оно локально для того компьютера / браузера, который используется / сохраняется. Для этого у меня нет доступа к таблице стилей classi c MySQL. Я хотел бы расширить или адаптировать свое локальное хранилище для переноса на другие браузеры; или сохранить мои пользовательские настройки в пользовательских объектах JS и JS свойствах объекта.

  • Мне нравится идея создания JSON или JavaScript объектов для каждого пользователя, когда бы ни нового пользователя, возьмите имя, создайте объект или object[key] с именем, и вначале имейте переменные свойств по умолчанию для свойств поля, и переменные заполняются и / или переопределяются, когда пользователь сохраняет их.
  • Или, если выше осуждается; хотел бы сохранить мою реализацию localstorage, так как она работает так хорошо, и найти плагин / библиотеку / расширение , который позволяет мне также сохранить это и повторно выполнить рендеринг в разных местах; об этом нужно думать раньше. Хотя я хотел бы сохранить это на стороне клиента; Я открыт как для решения node.js, так и для решения python, простого сорта данных должно работать достаточно.
  • Как насчет создания файла с моими данными localStorage? Возможно, файл .csv (это не конфиденциальные данные) , и он должен обновляться как мой localStorage?

Ответы [ 10 ]

3 голосов
/ 22 февраля 2020

Как насчет использования sqlite?

Всего один файл на вашем сервере, как CSV. Отправка http-запроса Чтобы обновить его с помощью оператора SQL с помощью knex или чего-то подобного после обновления localalstorage на стороне клиента.

По крайней мере, это лучше, чем cvs, я думаю, потому что вы можете определить несколько таблиц, которые являются более масштабируемыми и более эффективными, вы знаете, это база данных.

2 голосов
/ 28 февраля 2020

Вместо использования localalstorage сохраняйте настройки вашего пользователя в Межпланетной файловой системе (IPFS) https://ipfs.io/

По сути, вы должны указать, что их настройки представляют собой формат данных, подобный JSON а затем записать его в файл и отправить sh в IPFS.

Вам понадобится способ определить, какие данные поступают тому или иному пользователю. Возможно, вы могли бы использовать ха sh имени пользователя и пароля для именования ваших файлов или что-то в этом роде. Тогда ваш пользователь всегда сможет получить доступ к своему контенту на любом устройстве (если он не забыл свой пароль).

2 голосов
/ 26 февраля 2020

Вы можете использовать URL-адрес в качестве хранилища, если вы заархивировали пользовательские параметры.
получите параметры, которые хотите сохранить> json> deflate> закодируйте в base64> pu sh в URL-адрес 

const urlParam = btoa(pako.deflate(JSON.stringify(getUser()), { to: 'string' }));

onload: получить параметры из URL> декодировать из base64> Inflate> Parse json

const user = JSON.parse(pako.inflate(atob(urlParam), { to: 'string' }));

https://jsfiddle.net/chukanov/q4heL8gu/44/

Параметр URL будет довольно длинным, но в 10 раз меньше максимально доступного

2 голосов
/ 23 февраля 2020

Я добавляю свои два цента здесь.

Экспорт / Импорт файла (JSON, XML, CSV, TSV и др. c.)

Экспорт:

Сериализация настроек и загрузка их в виде файла.

Импорт:

Открытие экспортированного / загруженного сериализованного файла настроек .

Пример кода: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Settings Export/Import Demo</title>
</head>

<body>
    <div id="display"></div> <br>
    <button onclick="exportSettings();">Export</button>

    <button onclick="resetSettings();">Reset</button> <br><br>
    File to import: <input id="file-input" type="file" accept="application/json"> <br>
    <button onclick="importSettings();">Import</button>
    <script>

        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();
    </script>
</body>

</html>

URL (строка запроса)

Экспорт:

Кодирование настроек в строку запроса и объединение с текущим URL-адресом в качестве гиперссылки.

Импорт:

Посетите гиперссылку, содержащую строку запроса с закодированными настройками, затем JavaScript обнаружение и загрузка настроек из строки запроса.

закодированные в Base64 данные

Экспорт:

Сериализация настроек и их кодирование в виде строки Base64 , а затем скопировать в буфер обмена.

Импорт:

Вставить строку Base64 из буфера обмена в текстовое поле для декодирования, десериализации и загрузки настроек.

QR C ode

Экспорт:

Кодирование настроек в строку запроса и объединение с текущим URL-адресом в качестве гиперссылки. Затем сгенерируйте изображение QR-кода и отобразите.

Импорт:

Сканируйте сгенерированное изображение QR-кода и автоматически перейдите по гиперссылке.

HTTP-сервер (Node.js) / облачное хранилище (AWS S3)

Экспорт:

HTTP POST для конечной точки автоматически при обновлении значений по идентификатору пользователя.

Импорт:

HTTP GET из конечной точки по идентификатору пользователя.

Дополнительно: PouchDB

База данных, которая синхронизируется!

PouchDB - это JavaScript база данных с открытым исходным кодом, созданная на основе Apache CouchDB , которая предназначена для работы в пределах браузер.

PouchDB был создан, чтобы помочь веб-разработчикам создавать приложения, которые работают так же автономно, как и онлайн. Он позволяет приложениям хранить данные локально в автономном режиме, а затем синхронизировать их с CouchDB и совместимыми серверами, когда приложение снова подключено к сети, сохраняя данные пользователя в синхронизированном состоянии c независимо от того, где они в следующий раз войдут в систему.

1 голос
/ 28 февраля 2020

Лучший способ реализовать это без использования базы данных для обмена данными, я считаю, что это WebRT C решение, я думал об этом как способ сделать это, но у меня нет код для него (по крайней мере, на данный момент), поэтому при некотором поиске я обнаружил, что кто-то уже сделал это (не совсем, но с некоторыми изменениями он будет готов) здесь например, и его часть этой статьи webrt c без сервера сигнализации

вот еще один источник: канал передачи данных c пример демо

и на github: канал передачи данных c пример

WebRT C предназначен не только для видео / аудио чата, он также может использоваться для обмена текстовыми сообщениями и совместной работы при редактировании текста.

Это решение даже упоминается в одном из ответов здесь .

1 голос
/ 23 февраля 2020

Вы можете использовать библиотеку с именем localForage, которая в основном имеет тот же API, что и localStorage, за исключением того, что она позволяет хранить более сложные структуры данных (массивы, объекты), а также поддерживает обратный вызов в стиле nodejs, обещания и async await.

Вот ссылка на репозиторий , где вы можете найти примеры использования и способы его реализации в своем проекте так, как вам нравится.

0 голосов
/ 29 февраля 2020

Очевидно, что лучшим подходом является использование базы данных. Тем не менее, если вы склонны использовать базу данных, то, возможно, лучше всего использовать комбинацию методов, которые, я полагаю, вы уже затронули, поэтому я помогу вам соединить точки здесь.

Необходимые шаги:

  1. LocalStorage API (поскольку он уже частично работает для вас).
  2. Создание узла или Python (или что вы вы можете использовать) конечную точку для получения настроек GET и POST.
  3. Создайте файл userSettings. JSON на своем сервере API.

Инструкции:

Вы бы использовали localStorage так же, как вы используете его сейчас (текущее рабочее состояние).

Чтобы переместить или иметь пользовательские настройки на разных устройствах, файл userSettings. JSON (служащий базой документов) будет использоваться для хранения и импорта пользовательских настроек.

Ваша конечная точка API будет использоваться для получения пользовательских настроек, если в localStorage их нет. При обновлении настроек обновите localStorage, а затем ЗАПИШИТЕ / ОБНОВИТЕ новые настройки в файле userSettings. JSON, используя свою конечную точку.

Ваша конечная точка API будет использоваться только для поддержки (чтения и записи) файла userSettings. JSON. Вам понадобится метод / функция для создания, обновления и, возможно, удаления настроек в вашем файле. Как вы, возможно, уже знаете, формат файла JSON не сильно отличается от базы данных MongoDB. В этом случае вы просто создаете методы, необходимые для управления вашим файлом.

Надеюсь, это поможет!

0 голосов
/ 28 февраля 2020

Вы можете решить это без базы данных, но я бы не рекомендовал это. По сути, у вас есть пары (user, localStorage), и когда данный пользователь идентифицирует себя, его / ее localStorage должны быть предоставлены определенным образом. Вы можете попросить пользователей хранить свои локальные хранилища на своем собственном компьютере, но тогда им придется скопировать его на другие машины, что является трудоемким и никогда не приобретет популярность. Можно вручную запустить блок Javascript в консоли своего браузера, чтобы убедиться, что у localStorage есть свои данные, и копировать localStorage на разных компьютерах лишь немного проще, чем делать все вручную.

Вы можете поместите информацию о localStorage, закодированную в URL-адрес, но помимо проблемы длины URL-адреса, которая может стать проблемой, и постоянных проблем с кодированием, весь ваш localStorage может контролироваться третьей стороной, имеющей доступ к маршрутизатору. Я знаю, что вы сказали, что данные не являются конфиденциальными, но я верю, что они не являются конфиденциальными пока . Но как только пользователи будут использовать это, если это удобно, они также будут хранить конфиденциальные данные, или у ваших клиентов могут быть такие задачи для вас, или даже вы можете понять, что вам нужно хранить там данные, которые не публикуются на 100% c .

Кроме того, на практике вы столкнетесь с очень серьезными проблемами синхронизации, то есть все хорошо, чтобы сделать localStorage agnosti c, но тогда, какова реальная версия? Если вы регулярно работаете над 10 различными сессиями, то синхронизация localStorages становится сложной задачей. Это означает, что localStorage необходимо пометить по времени.

Таким образом, вам потребуется центральное место, сервер для хранения последней сохраненной версии localStorage. Если по каким-то неизвестным причинам вас отвлекли базы данных, вы можете хранить локальные хранилища внутри файлов, которые идентифицируют пользователя, например

johndoe. json

и затем вы потребуется реализовать функцию экспорта, которая будет отправлять текущий JSON пользователя на сервер и сохранять его в файл, а также функцию импорта, которая будет загружать файл, сохраненный для пользователя, и обеспечивать соответствующее обновление localStorage. Вы также можете сделать это вместе, реализовав синхронизацию.

Пока это просто, но что, если у пользователя уже есть некоторые полезные данные внутри его локального локального хранилища, а также на сервере? Самый простой подход - переопределить одно другим, но какой? Если мы импортируем, то локальный переопределяется, если экспортируется, то перезаписывается тот, что на сервере, если мы синхронизируем, то перезаписывается более старый.

Однако в некоторых случаях вы хотите объединить два localStorages того же пользователя, поэтому:

новые элементы

Я считаю, что если элемент новый, то следует каким-то образом знать, что он был создан в этом сеансе, что полезно для знаю, потому что это означает, что на другом сеансе, с которым мы объединяемся, этот новый элемент не был удален, и, следовательно, его можно добавить.

элемент меняет

Если тот же элемент отличается в обоих случаях более новая версия должна иметь преимущественную силу.

удаленные элементы

Интересный случай - когда в одном сеансе он был удален, а в другом - обновлен. В этом случае я думаю, что более новые изменения должны преобладать.

Однако, несмотря на все ваши усилия, пользователи могут все еще испортить (и ваше программное обеспечение тоже) вещи, поэтому резервное копирование каждого сеанса на вашем сервере делает чувство.

0 голосов
/ 26 февраля 2020

Вы можете использовать Redis . Это хранилище структуры данных в памяти, используемое в качестве базы данных. Вы можете хранить свои данные в форматах пары ключей. Это также делает ваше приложение быстрым и эффективным.

0 голосов
/ 12 февраля 2020

Используйте файлы cookie или загружаемый файл, который пользователи могут взять с собой для загрузки при доступе к другому браузеру. Это можно сделать с помощью текстового файла JSON или JavaScript с данными объекта.

...