10

Sasaran: memperpanjang yang sudah saya terapkan localStoragedi aplikasi saya, untuk menjadi baik, bukan lokal saya kira.

Saya suka penerapan penyimpanan pengaturan pengguna sederhana dengan API penyimpanan lokal. Saya memiliki ini berfungsi untuk kebutuhan saya di aplikasi web, tetapi satu-satunya masalah adalah itu lokal untuk mesin / browser yang sedang digunakan / disimpan. Saya tidak memiliki akses ke tabel gaya MySQL klasik untuk ini. Saya ingin memperluas atau menyesuaikan penyimpanan lokal saya untuk dibawa ke browser lain; atau menyimpan pengaturan pengguna saya di objek JS pengguna dan properti objek JS.

Saya suka ide hanya membuat objek JSON atau JavaScript dengan setiap pengguna, setiap kali ada pengguna baru, mengambil nama, membuat objek atau object[key]dengan nama, dan memiliki properti bidang variabel default pada awalnya, dan variabel menjadi diisi dan atau diganti saat pengguna menyimpannya.
Atau jika hal di atas disukai; ingin menjaga implementasi penyimpanan lokal saya karena berfungsi dengan baik dan menemukan plugin / perpustakaan / ekstensi semacam itu yang memungkinkan saya untuk juga menyimpan ini dan merender ulang di lokasi yang berbeda; ini harus dipikirkan sebelumnya. Meskipun saya ingin menyimpannya di sisi klien; Saya terbuka untuk solusi node.js dan juga solusi python, jenis data sederhana harus cukup bekerja.
Bagaimana dengan menghasilkan file dengan localStoragedata saya ? Mungkin file .csv (ini bukan data sensitif) dan dimutakhirkan seperti yang saya localStoragelakukan?

— liburan dok
sumber

2

Anda tidak dapat melakukan ini hanya di sisi klien. Untuk mempertahankan informasi pengguna di seluruh browser, Anda memerlukan server publik dan menyimpan informasi di dalamnya. Biasanya ini dilakukan menggunakan database; jika Anda tidak ingin menggunakan mySQL ada jenis penyimpanan data lainnya. Firebase cukup dekat dengan apa yang Anda bayangkan, ini memungkinkan Anda untuk menyimpan objek dengan struktur sewenang-wenang. (juga, JSON adalah format teks. tidak ada yang namanya objek JSON)

— Chris G

agak mirip dengan itu: stackoverflow.com/a/60279503/4845566 ?

— deblocker

3

Bagaimana dengan menggunakan sqlite?

Hanya satu file di server Anda seperti csv. Mengirim permintaan http Untuk memperbaruinya menggunakan pernyataan SQL oleh knex atau sesuatu seperti itu setelah memperbarui penyimpanan lokal di sisi klien.

Setidaknya lebih baik daripada cvs saya pikir karena Anda dapat mendefinisikan beberapa tabel, yang lebih scalable, dan lebih efisien, Anda tahu, itu adalah database.

— Kobako
sumber

2

Saya menambahkan dua sen saya di sini.

Ekspor / Impor File (JSON, XML, CSV, TSV, dll.)

Ekspor:

Serialize pengaturan dan unduh sebagai file.

Impor:

Buka file pengaturan serial yang diekspor / diunduh.

Kode Contoh:

<!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 (String Kueri)

Ekspor:

Encode pengaturan ke string kueri, dan gabungkan dengan URL saat ini sebagai hyperlink.

Impor:

Kunjungi hyperlink yang berisi string kueri dengan pengaturan yang disandikan, kemudian JavaScript mendeteksi dan memuat pengaturan dari string kueri.

Base64 Data Yang Dienkripsi

Ekspor:

Serialize pengaturan kemudian encode sebagai string Base64, dan kemudian salin ke clipboard.

Impor:

Rekatkan string Base64 dari clipboard ke kotak teks untuk mendekode, deserialize dan memuat pengaturan.

Kode QR

Ekspor:

Encode pengaturan ke string kueri, dan gabungkan dengan URL saat ini sebagai hyperlink. Kemudian buat gambar dan tampilan kode QR.

Impor:

Pindai gambar kode QR yang dihasilkan dan kunjungi hyperlink secara otomatis.

Server HTTP (Node.js) / Penyimpanan Awan (AWS S3)

Ekspor:

HTTP POST untuk endpoint secara otomatis saat memperbarui nilai, berdasarkan id pengguna.

Impor:

HTTP DAPATKAN dari titik akhir oleh id pengguna.

Ekstra: PouchDB

Database yang Disinkronkan!

PouchDB adalah database JavaScript sumber terbuka yang terinspirasi oleh Apache CouchDB yang dirancang untuk berjalan dengan baik di dalam browser.

PouchDB dibuat untuk membantu pengembang web membangun aplikasi yang berfungsi baik offline seperti yang mereka lakukan online. Ini memungkinkan aplikasi untuk menyimpan data secara lokal saat offline, kemudian menyinkronkannya dengan CouchDB dan server yang kompatibel ketika aplikasi kembali online, menjaga data pengguna tetap sinkron di mana pun mereka masuk.

— DK Dhilip
sumber

Terima kasih atas tanggapannya. Yang terbaik; dengan impor / ekspor pertama - saya bisa membuatnya sehingga pengguna cukup membuka file untuk pengaturan untuk memuat? Bagaimana itu bisa berhasil?

— liburan dok

1

Menambahkan contoh kode untuk ekspor / impor file JSON.

— DK Dhilip

Ah, begitu. Terima kasih. Saya hanya berpikir itu agak terlalu banyak untuk ditanyakan dari pengguna. Jika ada cara saya bisa menghasilkan hyperlink dan mengirimkannya kepada mereka mungkin. Saya pikir data saya mengandung terlalu banyak karakter untuk dimasukkan ke dalam string kueri URL. Bagaimana opsi kode QR dipindai?

— liburan dok

Jika data Anda terlalu besar untuk dicocokkan dengan string kueri, mungkin Anda bisa bereksperimen dengan gzip / deflate plus Base64 untuk melihat apakah itu dapat mengurangi ukuran payload dan termasuk dalam string kueri? Saya tidak tahu apakah ini akan cukup baik untuk kasus Anda, hanya pemikiran acak. Untuk opsi kode QR, dapat dipindai oleh perangkat apa pun dengan kamera, atau memindai file gambar secara langsung (dari URL biasa, URL data, file terbuka).

— DK Dhilip

Untuk memperluas ide pengurangan ukuran data, Anda juga bisa mencoba membuat serialisasi data Anda secara manual ke ArrayBuffer untuk membuatnya sekecil mungkin dan kemudian menerapkan pengkodean Base64 untuk itu tergantung pada metode transportasi.

— DK Dhilip

2

Anda dapat menggunakan URL sebagai penyimpanan jika Anda mem-zip params pengguna Anda.
dapatkan params yang ingin Anda simpan> json> deflate> encode ke base64> dorong ke URL

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

onload: dapatkan params dari url> decode dari base64> inflate> parse json

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

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

Param url akan cukup panjang, tetapi 10 kali lebih sedikit dari maksimum yang tersedia

— Anton Chukanov
sumber

Ini! Namun ketika saya menghibur log data penyimpanan lokal saya itu ~ 20k dan ~ 8k dalam karakter. Bisakah saya masih melakukan hal seperti ini?

— liburan doc

1

Saya telah menguji dengan karakter 160k. Ini akan menjadi 1.600 karakter setelah mengempis, bahkan IE akan bekerja tanpa masalah (panjang url maksimum untuk - 2048). Peramban modern tidak memiliki batasan untuk panjang url.

— Anton Chukanov

Terima kasih! apakah pako memerlukan perpustakaan atau sesuatu? Saya mendapatkan pako tidak terdefinisi

— liburan dok

1

"Browser modern tidak memiliki batasan untuk panjang URL" adalah asumsi yang salah, silakan lihat ini . Juga, pako adalah perpustakaan JavaScript yang dapat ditemukan di sini ( GitHub , cdnjs ). Terakhir, harap perhatikan juga bahwa rasio kompresi dapat bervariasi tergantung pada konten data.

— DK Dhilip

2

Alih-alih menggunakan penyimpanan lokal, simpan pengaturan pengguna Anda di InterPlanetary File System (IPFS) https://ipfs.io/

Pada dasarnya, Anda akan meletakkan pengaturan mereka adalah format data seperti JSON dan kemudian menulisnya ke file dan mendorongnya ke IPFS.

Anda akan membutuhkan cara untuk mengidentifikasi data mana yang masuk ke pengguna yang mana. Mungkin Anda bisa menggunakan hash nama pengguna dan kata sandi untuk memberi nama file Anda atau sesuatu seperti itu. Maka pengguna Anda akan selalu dapat mengakses konten mereka di perangkat apa pun (asalkan mereka tidak lupa kata sandi mereka).

— Michael Babcock
sumber

1

Anda dapat menggunakan pustaka yang disebut localForageyang pada dasarnya memiliki API yang sama seperti localStoragekecuali itu memungkinkan Anda untuk menyimpan struktur data yang lebih kompleks (array, objek) dan juga mendukung nodejsgaya panggilan balik, janji dan async await.

Berikut ini tautan ke repositori tempat Anda dapat menemukan contoh penggunaan dan bagaimana menerapkannya dalam proyek sesuai keinginan Anda.

— C.ochev
sumber

Terima kasih itu terlihat rapi; tetapi sepertinya memiliki keterbatasan yang sama untuk DB seperti localStorage normal

— liburan doc

1

Cara terbaik untuk mengimplementasikan ini tanpa menggunakan database untuk berbagi data, saya percaya itu berbasis solusi WebRTC , saya menganggapnya sebagai cara untuk melakukan itu tetapi saya tidak memiliki kode untuk itu (setidaknya untuk saat ini), jadi dengan beberapa pencarian saya menemukan seseorang sudah melakukannya (tidak persis, tetapi dengan beberapa tweak akan siap) di sini misalnya, dan bagiannya dari artikel ini webrtc tanpa server pemberi sinyal

di sini adalah satu lagi sumber: demo contoh dasar saluran data

dan pada github: contoh dasar saluran data

WebRTC tidak hanya untuk obrolan video / audio, itu juga dapat digunakan dalam pesan teks dan kolaborasi dalam pengeditan teks.

Solusi ini bahkan disebutkan dalam salah satu jawaban di sini .

— Ma'moun othman
sumber

0

Gunakan cookie atau miliki file yang dapat diunduh yang dapat diambil pengguna untuk memuatnya saat mereka mengakses browser lain. Anda dapat melakukan ini dengan file teks, JSON, atau JavaScript dengan data objek.

Saya percaya cookie hanya lokal juga?

— liburan dok

Cookie pihak ketiga dapat digunakan oleh banyak situs web jika mereka bergantung pada "sumber" yang sama.

0

Anda dapat menggunakan Redis . Ini adalah penyimpanan struktur data dalam memori, digunakan sebagai basis data. Anda dapat menyimpan data Anda dalam format pasangan kunci. Ini juga membuat aplikasi Anda cepat dan efisien.

— Deeksha gupta
sumber

0

Jelas pendekatan terbaik adalah menggunakan database. Namun, jika Anda cenderung menggunakan basis data maka pendekatan terbaik yang mungkin adalah menggunakan kombinasi teknik yang saya yakin sudah Anda sentuh sehingga saya akan membantu Anda menghubungkan titik-titik di sini.

Langkah-langkah yang Dibutuhkan:

API LocalStorage (Karena sudah berfungsi sebagian untuk Anda).
Buat titik akhir Node atau Python (Atau apa yang Anda sukai) untuk GET dan data pengaturan POST.
Buat file userSettings.JSON di server API Anda.

Instruksi:

Anda akan menggunakan penyimpanan lokal Anda dengan cara yang sama seperti Anda menggunakannya sekarang (kondisi kerja saat ini).

Untuk memindahkan atau memiliki pengaturan pengguna di berbagai perangkat, file userSettings.JSON (berfungsi sebagai basis data dokumen) akan digunakan untuk menyimpan dan mengimpor pengaturan pengguna.

Titik akhir API Anda akan digunakan untuk MENDAPATKAN pengaturan pengguna jika tidak ada di localStorage. Pada pembaruan pengaturan, perbarui localStorage Anda dan kemudian POST / Perbarui pengaturan baru dalam file UserSettings.JSON Anda menggunakan titik akhir Anda.

Titik akhir API Anda hanya akan digunakan untuk memelihara (membaca dan menulis) file userSettings.JSON. Anda memerlukan metode / fungsi untuk membuat, memperbarui, dan mungkin menghapus pengaturan di file Anda. Seperti yang mungkin sudah Anda ketahui, format file JSON tidak jauh berbeda dari database MongoDB. Dalam hal ini Anda hanya menciptakan metode yang Anda butuhkan untuk mengelola file Anda.

Saya harap ini membantu!

— mohammedabdulai
sumber

-1

Anda dapat menyelesaikan ini tanpa database, tetapi saya tidak akan merekomendasikannya. Pada dasarnya Anda memiliki (pengguna, localStorage) pasangan dan ketika pengguna yang diberikan mengidentifikasi dirinya sendiri, / localStorage nya harus disediakan dengan cara. Anda dapat memberi tahu pengguna untuk menyimpan penyimpanan lokal mereka di mesin mereka sendiri, tetapi kemudian mereka harus menyalinnya ke mesin lain, yang padat karya dan tidak akan pernah mendapatkan popularitas. Seseorang dapat secara manual menjalankan potongan Javascript di konsol browser mereka untuk memastikan bahwa localStorage memiliki data mereka dan harus menyalin mesin localStorage accross hanya sedikit lebih mudah daripada melakukan semuanya secara manual.

Anda dapat menempatkan informasi localStorage disandikan ke dalam URL, tetapi selain masalah panjang URL, yang mungkin menjadi masalah dan masalah penyandian yang selalu ada, seluruh localStorage Anda dapat dipantau oleh pihak ketiga, memiliki akses ke router Anda. Saya tahu Anda telah mengatakan bahwa data tidak sensitif, tapi saya percaya bahwa itu tidak peka belum . Tetapi begitu pengguna akan menggunakan ini, jika nyaman, mereka akan menyimpan data sensitif juga atau, klien Anda mungkin memiliki tugas seperti itu untuk Anda, atau bahkan Anda mungkin menyadari bahwa Anda perlu menyimpan data di sana yang tidak 100% bersifat publik.

Selain itu, dalam praktiknya Anda akan menghadapi masalah sinkronisasi yang sangat serius, yaitu, semuanya menyenangkan untuk menjadikan localStorage agnostik, tetapi kemudian, apa versi sebenarnya? Jika Anda secara teratur mengerjakan 10 sesi yang berbeda, maka menyinkronkan penyimpanan lokal menjadi masalah yang sulit. Ini berarti bahwa penyimpanan lokal perlu cap waktu.

Jadi, Anda akan membutuhkan tempat pusat, server untuk menyimpan versi localStorage yang terakhir disimpan. Jika Anda terhindar dari basis data karena beberapa alasan yang tidak diketahui, Anda dapat menyimpan penyimpanan lokal di dalam file yang mengidentifikasi pengguna, seperti

johndoe.json

dan kemudian, Anda perlu mengimplementasikan fitur ekspor, yang akan mengirim JSON pengguna saat ini ke server dan menyimpannya ke dalam file dan fitur impor, yang akan mengunduh file yang disimpan untuk pengguna dan memastikan bahwa penyimpanan lokal diperbarui demikian. Anda dapat melakukan keduanya bersama-sama, menerapkan sinkronisasi.

Sejauh ini masih sederhana, tetapi bagaimana jika pengguna sudah memiliki beberapa data yang berguna di dalam penyimpanan lokal dan di server juga? Pendekatan paling sederhana adalah menimpa satu dengan yang lain, tetapi yang mana? Jika kita mengimpor, maka yang lokal diganti, jika mengekspor, maka yang di server ditimpa, jika kita menyinkronkan, maka yang lebih tua ditimpa.

Namun, dalam beberapa kasus Anda ingin menggabungkan dua penyimpanan lokal dari pengguna yang sama, jadi:

elemen baru

Saya percaya bahwa jika suatu elemen baru, harus diketahui dengan cara tertentu bahwa elemen itu dibuat dalam sesi ini, yang berguna untuk diketahui, karena itu berarti bahwa pada sesi lain yang kami gabungkan, item baru ini tidak dihapus. dan karenanya intuitif untuk menambahkannya.

perubahan elemen

Jika elemen yang sama berbeda dalam dua kasus, maka versi yang lebih baru akan menang.

elemen yang dihapus

Kasus yang menarik adalah ketika dalam satu sesi telah dihapus dan yang lain telah diperbarui. Dalam hal ini saya pikir perubahan yang lebih baru harus menang.

Namun, terlepas dari upaya terbaik Anda, pengguna mungkin masih mengacaukan (dan perangkat lunak Anda juga) hal-hal, jadi membuat cadangan setiap sesi di server Anda masuk akal.

— Lajos Arpad
sumber

Cara memperluas penyimpanan lokal di seluruh perangkat (tanpa DB)

Ekspor / Impor File (JSON, XML, CSV, TSV, dll.)

URL (String Kueri)

Base64 Data Yang Dienkripsi

Kode QR

Server HTTP (Node.js) / Penyimpanan Awan (AWS S3)

Ekstra: PouchDB

elemen baru

perubahan elemen

elemen yang dihapus