[javascript] DB없이 장치 전체에서 localStorage를 확장하는 방법

목표 :localStorage 앱에서 이미 구현 한 것을 로컬이 아닌 것으로 확장 합니다.

로컬 저장소 API를 사용하여 간단한 사용자 설정을 저장하는 것을 좋아합니다. 나는 웹 응용 프로그램에서 내 요구에 맞게 작동하지만 유일한 문제는 사용 / 저장되는 해당 컴퓨터 / 브라우저의 로컬 문제입니다. 이에 대한 고전적인 MySQL 스타일 테이블에 액세스 할 수 없습니다. 로컬 브라우저를 확장하거나 다른 브라우저로 옮기고 싶습니다. 또는 사용자 JS 객체 및 JS 객체 속성에 내 사용자 설정을 저장하십시오.

나는 새로운 사용자가있을 때마다 이름을 가져와 객체를 만들거나 object[key]이름을 가지고 필드 속성 기본 변수를 처음에 변수가 채워지거나 각 사용자마다 JSON 또는 JavaScript 객체를 만드는 아이디어를 좋아합니다. 사용자가 저장하면 재정의됩니다.
또는 위의 내용이 찌그러진 경우; 로컬 스토리지 구현이 잘 작동하면서 플러그인 / 라이브러리 / 확장 프로그램 을 찾아서 저장하고 다른 위치에 다시 렌더링 할 수 있도록하고 싶습니다. 이것은 이전에 생각되었습니다. 클라이언트 쪽을 유지하고 싶지만; 나는 파이썬 솔루션뿐만 아니라 node.js 솔루션에 개방되어 있으며 간단한 데이터 프레임이 충분히 작동해야합니다.
내 localStorage데이터 로 파일을 생성하는 것은 어떻습니까? 아마도 .csv 파일 (이것은 중요하지 않은 데이터입니다) 내 파일 처럼 업데이트 localStorage됩니까?

답변

sqlite를 사용하는 것은 어떻습니까?

서버에 csv와 같은 하나의 파일 만 있습니다. http 요청 보내기 클라이언트 측에서 로컬 저장소를 업데이트 한 후 knex 또는 이와 유사한 방법으로 SQL 문을 사용하여 업데이트합니다.

적어도 cvs보다 낫습니다. 여러 테이블을 정의 할 수 있기 때문에 더 확장 가능하고 효율적이며 데이터베이스입니다.

답변

여기에 2 센트를 추가하겠습니다.

파일 내보내기 / 가져 오기 (JSON, XML, CSV, TSV 등)

수출:

설정을 직렬화하고 파일로 다운로드하십시오.

수입:

내보내거나 다운로드 한 직렬화 된 설정 파일을 엽니 다.

예제 코드 :

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

수출:

설정을 쿼리 문자열로 인코딩하고 현재 URL과 하이퍼 링크로 결합합니다. 그런 다음 QR 코드 이미지를 생성하고 표시하십시오.

수입:

생성 된 QR 코드 이미지를 스캔하고 하이퍼 링크를 자동으로 방문하십시오.

HTTP 서버 (Node.js) / 클라우드 스토리지 (AWS S3)

수출:

사용자 ID별로 값을 업데이트 할 때 엔드 포인트에 대한 HTTP POST.

수입:

사용자 ID 별 엔드 포인트의 HTTP GET

추가 : PouchDB

동기화되는 데이터베이스!

PouchDB는 Apache CouchDB에서 영감을 얻은 오픈 소스 JavaScript 데이터베이스 이며 브라우저에서 잘 실행되도록 설계되었습니다.

PouchDB는 웹 개발자가 온라인과 마찬가지로 오프라인에서도 작동하는 응용 프로그램을 구축 할 수 있도록하기 위해 만들어졌습니다. 응용 프로그램은 오프라인 상태에서 로컬로 데이터를 저장 한 다음 응용 프로그램이 온라인 상태 일 때 CouchDB 및 호환 서버와 데이터를 동기화하여 다음 번 로그인 위치에 상관없이 사용자의 데이터를 동기화합니다.

답변

사용자 매개 변수를 압축하면 URL을 저장소로 사용할 수 있습니다.
저장하려는 매개 변수 가져 오기> json> deflate> base64로 인코딩> URL로 푸시

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

onload : URL에서 매개 변수 가져 오기> base64에서 디코딩> 팽창> json 구문 분석

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

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

URL 매개 변수는 꽤 길지만 최대 10 배 적습니다.

답변

로컬 저장소를 사용하는 대신 사용자의 설정을 IPFS (InterPlanetary File System) https://ipfs.io/에 저장하십시오.

기본적으로 JSON과 같은 데이터 형식을 설정 한 다음 파일에 쓰고 IPFS로 푸시합니다.

어떤 데이터가 어떤 사용자에게 전달되는지 식별하는 방법이 필요합니다. 아마도 사용자 이름과 비밀번호의 해시를 사용하여 파일 이름이나 이와 유사한 이름을 지정할 수 있습니다. 그러면 사용자는 비밀번호를 잊어 버리지 않는 한 항상 모든 장치에서 콘텐츠에 액세스 할 수 있습니다.

답변

보다 복잡한 데이터 구조 (배열, 객체)를 저장할 수 있고 스타일 콜백, 약속 및을 지원한다는 점 localForage을 localStorage제외하고 는 기본적으로 API와 동일한 API 인 라이브러리를 사용할 수 있습니다 .nodejsasync await

다음은
예제 사용법을 찾을 수 있는 저장소 링크 와 프로젝트에서 원하는 방식으로 구현하는 방법입니다.

답변

데이터를 공유하기 위해 데이터베이스를 사용하지 않고 이것을 구현하는 가장 좋은 방법은 WebRTC 솔루션 기반이라고 생각합니다.이를 수행하는 방법으로 생각했지만 (적어도 지금은) 코드가 없습니다. 일부 검색 나는 누군가가 이미 (정확하지는 않지만 약간의 조정으로 준비가되어 있음) 여기 에 있고 신호 서버가없는 이 기사 webrtc 의 일부를 발견했습니다.

여기에 하나 이상의 소스가 있습니다 : 데이터 채널 기본 예제 데모

그리고 github에서 : 데이터 채널 기본 예

WebRTC는 화상 / 음성 채팅뿐만 아니라 문자 메시지 및 공동 작업에서 문자 편집에도 사용할 수 있습니다.

이 솔루션은 여기 에 대한 답변 중 하나에서 언급되었습니다 .

답변

쿠키를 사용하거나 사용자가 다른 브라우저에 액세스 할 때 쿠키와 함께로드 할 수있는 다운로드 가능한 파일이 있어야합니다. 객체 데이터가있는 텍스트, JSON 또는 JavaScript 파일을 사용하여이 작업을 수행 할 수 있습니다.