LocalStorage'ı aygıtlar arasında genişletme (DB olmadan)

10

Hedef:localStorage benim app zaten uygulanan benim uzatmak , iyi olmak, yerel olmayan sanırım.

Yerel depolama API'sı ile basit kullanıcı ayarlarını kaydetmeyi seviyorum. Bir web uygulamasında ihtiyaçlarım için bu çalışma var, ama tek sorun o kullanılan / kaydedilen makine / tarayıcı için yerel olmasıdır. Bunun için klasik bir MySQL stil tablosuna erişimim yok. Yerel depolama alanımı diğer tarayıcılara taşımak için genişletmek veya uyarlamak istiyorum; veya kullanıcı ayarlarımı kullanıcı JS nesnelerinde ve JS nesnesi özelliklerinde saklayabilir.

  • Her kullanıcıyla sadece JSON veya JavaScript nesneleri oluşturma fikrini seviyorum, ne zaman yeni bir kullanıcı varsa, adı al, bir nesne veya ad oluştur object[key]ve alan özellikleri ilk önce varsayılan değişkenlere sahip olur ve değişkenler doldurulur ve veya kullanıcı bunları kaydettiğinde geçersiz kılınır.
  • Ya da yukarıdakiler kaşlarını çattıysa; çok iyi çalıştığı için yerel depolama uygulamamı korumak ve bunu da kaydetmeme ve farklı yerlerde yeniden oluşturmama izin veren bir tür eklenti / kütüphane / uzantı bulmak istiyorum; bu daha önce düşünülmeye başlandı. Ben müşteri tarafında tutmak isterdim; Bir node.js çözümünün yanı sıra python çözümüne de açığım, basit bir veri çerçevesi yeterince çalışmalıdır.
  • localStorageVerilerimle dosya oluşturmaya ne dersiniz ? Belki de bir .csv dosyası (bu hassas olmayan verilerdir) ve benim yaptığım gibi güncellenir localStoragemi?
javascript  node.js  json  cookies  local-storage 
— doktor tatili
kaynak
2
Bu istemci tarafını yapamazsınız. Tarayıcılarda kullanıcı bilgilerinin kalıcı olması için bir ortak sunucuya ve bu sunucuda bilgi depolamanıza gerek vardır. Genellikle bu bir veritabanı kullanılarak yapılır; mySQL kullanmak istemiyorsanız başka tür veri depolama türleri de vardır. Firebase hayal ettiğinize oldukça yakındır, keyfi yapıdaki nesneleri saklamanızı sağlar. (ayrıca, JSON bir metin biçimidir. JSON nesnesi diye bir şey yoktur)
— Chris G
— deblocker

Yanıtlar:

3

Sqlite kullanmaya ne dersiniz?

Sunucunuzda csv gibi bir dosya var. Bir http isteği gönderme İstemci tarafındaki localstorage'ı güncelledikten sonra SQL deyimini knex veya benzeri bir yöntemle güncellemek için.

En azından bence cvs daha iyidir çünkü daha ölçeklenebilir ve daha verimli olan birkaç tablo tanımlayabilirsiniz, bilirsiniz, bir veritabanıdır.

— Kobako
kaynak
2

Buraya iki sentimi ekliyorum.

Dosyayı İçe / Dışa Aktar (JSON, XML, CSV, TSV vb.)

İhracat:

Ayarları seri hale getirin ve dosya olarak indirin.

İthalat:

Dışa aktarılan / indirilen serileştirilmiş ayarlar dosyasını açın.

Örnek Kod: 

<!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 (Sorgu Dizesi)

İhracat:

Ayarları sorgu dizesine kodlayın ve mevcut URL ile köprü olarak birleştirin.

İthalat:

Kodlanmış ayarlara sahip sorgu dizesi içeren köprüyü ziyaret edin, ardından JavaScript ayarları sorgu dizesinden algılar ve yükler.

Base64 Kodlanmış Veriler

İhracat:

Ayarları seri hale getirin, sonra Base64 dizesi olarak kodlayın ve panoya kopyalayın.

İthalat:

Ayarların kodunu çözmek, serisini kaldırmak ve yüklemek için Base64 dizesini panodan metin kutusuna yapıştırın.

QR kod

İhracat:

Ayarları sorgu dizesine kodlayın ve mevcut URL ile köprü olarak birleştirin. Ardından bir QR kodu görüntüsü ve ekranı oluşturun.

İthalat:

Oluşturulan QR kodu görüntüsünü tarayın ve köprüyü otomatik olarak ziyaret edin.

HTTP Sunucusu (Node.js) / Bulut Depolama (AWS S3)

İhracat:

HTTP POST değerleri kullanıcı kimliği ile güncellenirken otomatik olarak son noktaya.

İthalat:

Kullanıcı kimliğine göre uç noktadan HTTP GET.

Ekstra: PoşetDB

Senkronize Olan Veritabanı!

PouchDB, Apache CouchDB'den esinlenen ve tarayıcıda iyi çalışacak şekilde tasarlanmış açık kaynaklı bir JavaScript veritabanıdır .

PouchDB, web geliştiricilerinin çevrimiçi oldukları kadar çevrimdışı çalışan uygulamalar geliştirmelerine yardımcı olmak için oluşturuldu. Uygulamaların çevrimdışı durumdayken verileri yerel olarak depolamasını, ardından uygulama tekrar çevrimiçi olduğunda CouchDB ve uyumlu sunucularla senkronize etmesini sağlar ve bir sonraki oturum açışları ne olursa olsun kullanıcının verilerini senkronize tutar.

— DK Dhilip
kaynak
Yanıtınız için teşekkürler. En iyisi henüz; ilk ithalat / ihracat ile - Ben sadece kullanıcı ayarları yüklemek için dosyayı açabilir böylece yapabilir? Bu nasıl olabilir?
— doc holiday
1
JSON dosyası dışa / içe aktarma için örnek kod eklendi.
— DK Dhilip
Ah, anlıyorum. Teşekkür ederim. Ben sadece bu kullanıcıdan sormak için çok fazla olduğunu düşünüyorum. Bir yol olsaydı, bir köprü oluşturabilir ve belki de onlara e-posta gönderebilirim. Verilerimin bir URL sorgu dizesine koymak için çok fazla karakter içerdiğini düşünüyorum. QR kodu seçeneği nasıl taranır?
— doc holiday
Verileriniz sorgu dizesine sığmayacak kadar büyükse, belki de yük boyutunu küçültebileceğini ve sorgu dizesine ekleyip ekleyemeyeceğini görmek için gzip / deflate plus Base64 ile deneme yapabilirsiniz? Bunun durumunuz için yeterince iyi çalışıp çalışmadığını bilmiyorum, sadece rastgele bir düşünce. QR kodu seçeneği için, kameralı herhangi bir cihaz tarafından taranabilir veya doğrudan görüntü dosyasını tarayabilir (normal URL, veri URL'si, açık dosyadan).
— DK Dhilip
Veri boyutu küçültme fikrini genişletmek için, verilerinizi olabildiğince küçük yapmak için ArrayBuffer'a manuel olarak serileştirmeyi ve ardından taşıma yöntemine bağlı olarak Base64 kodlamasını uygulamayı deneyebilirsiniz.
— DK Dhilip
2

Kullanıcı parametrelerinizi sıkıştırırsanız URL'yi depolama alanı olarak kullanabilirsiniz.
saklamak istediğiniz parametreleri edinin> json> deflate> base64'e kodla> URL'ye aktar 

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

onload: URL'lerden parametreleri alın> base64'den> kod çözme> ayrıştırma json

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

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

URL parametresi oldukça uzun olacak, ancak kullanılabilir maksimumdan 10 kat daha az olacak

— Anton Chukanov
kaynak
Bu! Ancak yerel depolama verilerimi günlüğe kaydettiğimde karakterlerde ~ 20k ve ~ 8k. Yine de böyle bir şey yapabilir miyim?
— doc holiday
1
160 bin karakterle test ettim. Deflate sonrasında 1600 karakter olacak, IE bile sorunsuz çalışacaktır (yani - 2048 için maksimum url uzunluğu). Modern tarayıcıların URL uzunluğu için herhangi bir sınırlaması yoktur.
— Anton Chukanov
Teşekkürler! pako bir kütüphane falan gerektiriyor mu? Pako undefined alıyorum
— doc holiday
1
"Modern tarayıcılar URL uzunluğu için bir sınır yoktur" yanlış bir varsayımdır, bakınız bu . Ayrıca, pako burada bulunan bir JavaScript kütüphanesidir ( GitHub , cdnjs ). Son olarak, sıkıştırma oranının veri içeriğine bağlı olarak değişebileceğini lütfen unutmayın.
— DK Dhilip
2

Yerel depolama kullanmak yerine, kullanıcı ayarlarınızı InterPlanetary Dosya Sistemi'nde (IPFS) https://ipfs.io/ saklayın.

Temel olarak, ayarlarını JSON gibi bir veri biçimine koyar ve daha sonra bunu dosyaya yazıp IPFS'ye gönderirsiniz.

Hangi verilerin hangi kullanıcıya gittiğini belirlemek için bir yola ihtiyacınız olacaktır. Dosyalarınızı adlandırmak için kullanıcı adı ve şifrenin bir karmasını kullanabilirsiniz. Ardından, kullanıcınızın içeriğine her zaman herhangi bir cihazdan erişebilir (şifresini unutmadığı sürece).

— Michael Babcock
kaynak
1

Sen adında bir kütüphane kullanabilirsiniz localForagetemelde aynı API vardır localStorageo daha karmaşık veri yapılarını (diziler, nesneler) saklamak için izin verir hariç ve ayrıca destekler nodejstarzı geri arama, sözler ve async await.

Örnek kullanımları bulabileceğiniz depoya ve projenize nasıl istediğiniz gibi uygulanacağına dair bir bağlantı .

— C.Gochev
kaynak
Düzgün görünüyor teşekkürler; ancak normal localStorage ile bir DB için aynı sınırlamalara sahip gibi görünüyor
— doc holiday
1

Veri paylaşımı için veritabanı kullanmadan bunu uygulamak için en iyi yolu, WebRTC çözüm tabanlı olduğuna inanıyorum , bunu yapmanın bir yolu olarak düşündüm ama bunun için kod yok (en azından şimdilik), yani bazı arama birisi zaten yaptım bulundu (tam olarak değil, ancak bazı düzeltmelerle birlikte hazır olacak) burada örneğin ve bu makalede onun parçası bir sinyal sunucusu olmadan WebRTC'de

İşte bir kaynak daha: veri kanalı temel örnek demo

ve github'da: veri kanalı temel örneği

WebRTC sadece görüntülü / sesli sohbet için değil aynı zamanda metin mesajlaşma ve metin düzenlemede işbirliği için de kullanılabilir.

Bu çözüm bile cevaplar birinde belirtilen buraya .

— Ma'moun othman
kaynak
0

Çerezleri kullanın veya kullanıcıların başka bir tarayıcıya eriştiklerinde yüklemek için birlikte alabilecekleri indirilebilir bir dosyaya sahip olun. Bunu, nesne verileri içeren bir metin, JSON veya JavaScript dosyasıyla yapabilirsiniz.

Çerezlerin sadece yerel olduğuna inanıyorum?
— doc holiday
Üçüncü taraf çerezleri, aynı "kaynağa" dayanıyorsa birden çok web sitesi tarafından kullanılabilir.
0

Redis'i kullanabilirsiniz . Veritabanı olarak kullanılan bir bellek içi veri yapısı deposudur. Verilerinizi anahtar çifti formatlarında saklayabilirsiniz. Ayrıca uygulamanızı hızlı ve verimli hale getirir.

— Deeksha Gupta
kaynak
0

Açıkçası en iyi yaklaşım bir veritabanı kullanmaktır. Ancak, bir veritabanı kullanmaya meyilli iseniz, olası bir en iyi yaklaşım, zaten dokunduğunuzu düşündüğüm tekniklerin bir kombinasyonunu kullanmaktır, bu yüzden noktaları burada birleştirmenize yardımcı olacağım.

Gerekli Adımlar:

  1. LocalStorage API'sı (Zaten kısmen sizin için çalışıyor olduğundan).
  2. GET ve POST ayarları verilerine bir Düğüm veya Python (veya neyle rahatsanız) uç noktası oluşturun.
  3. API sunucunuzda bir userSettings.JSON dosyası oluşturun.

Talimatlar:

LocalStorage'ınızı şu anda kullandığınız gibi kullanırsınız (mevcut çalışma durumu).

Kullanıcı ayarlarını farklı cihazlarda taşımak veya taşımak için, kullanıcı ayarlarını saklamak ve almak için bir userSettings.JSON dosyası (belge veritabanı olarak kullanılır) kullanılır.

LocalStorage'da yoksa, API uç noktanız kullanıcı ayarlarını almak için kullanılır. Ayarların güncellenmesi üzerine, localStorage'ınızı güncelleyin ve son noktanızı kullanarak userSettings.JSON dosyanızdaki yeni ayarları POST / UPDATE.

API uç noktanız yalnızca userSettings.JSON dosyasını korumak (okumak ve yazmak) için kullanılır. Dosyanızdaki ayarları oluşturmak, güncellemek ve belki de silmek için bir yönteme / işleve ihtiyacınız vardır. Bildiğiniz gibi, bir JSON dosya biçimi MongoDB veritabanından çok farklı değildir. Bu durumda, sadece dosyanızı yönetmek için gereken yöntemleri oluşturursunuz.

Umarım bu yardımcı olur!

— mohammedabdulai
kaynak
-1

Bunu bir veritabanı olmadan çözebilirsiniz, ancak ben tavsiye etmem. Temel olarak (kullanıcı, localStorage) çiftleriniz vardır ve belirli bir kullanıcı kendini tanımladığında, localStorage bir şekilde sağlanmalıdır. Kullanıcılara yerel depolarını kendi makinelerinde saklamalarını söyleyebilirsiniz, ancak daha sonra emek yoğun olan ve asla popülerlik kazanmayacak olan diğer makinelere kopyalamaları gerekecektir. Bir, localStorage'ın verilerinin bulunduğundan ve localStorage'ın makinelere kopyalamak zorunda kaldığından emin olmak için her şeyi manuel olarak yapmaktan biraz daha kolay olduğundan emin olmak için tarayıcılarının konsolunda bir Javascript yığınını manuel olarak çalıştırabiliriz.

Bir URL'ye kodlanmış localStorage bilgilerini koyabilirsiniz, ancak bir sorun haline gelebilecek URL uzunluğu sorununun ve mevcut kodlama sorunlarının yanı sıra, tüm localStorage'ınız yönlendiricinize erişimi olan bir üçüncü taraf tarafından izlenebilir. Sana verilerinin duyarlı olmadığını söyledi biliyorum, ama duyarlı olmadığını inanıyorum henüz . Ancak kullanıcılar bunu kullandığında, uygunsa, hassas verileri de depolayacaklar veya müşterileriniz sizin için bu tür görevlere sahip olabilir veya hatta% 100 herkese açık olmayan verileri depolamanız gerektiğini fark edebilirsiniz.

Bunların yanı sıra, pratikte çok ciddi senkronizasyon sorunları ile karşılaşacaksınız, yani, localStorage'ı agnostik yapmak güzel, ama o zaman gerçek sürüm nedir? Düzenli olarak 10 farklı oturumda çalışıyorsanız, localStorages'ı senkronize etmek zor bir sorun haline gelir. Bu, localStorage'ın zaman damgalı olması gerektiği anlamına gelir.

Bu nedenle, son kaydedilen localStorage sürümünü saklamak için merkezi bir yere, bir sunucuya ihtiyacınız olacak. Bazı bilinmeyen nedenlerden dolayı veritabanları tarafından engellenirseniz, localStorages'ı kullanıcıyı tanımlayan dosyaların içinde saklayabilirsiniz.

johndoe.json

ve sonra kullanıcının geçerli JSON'unu sunucuya gönderecek ve bir dosyaya ve bir içe aktarma özelliğine kaydedecek, kullanıcı için depolanan dosyayı indirecek ve localStorage'ın güncellenmesini sağlayacak bir dışa aktarma özelliği uygulamanız gerekir. buna göre. İkisini de bir araya getirerek bir senkronizasyon gerçekleştirebilirsiniz.

Bu şimdiye kadar basit, ancak kullanıcının yerel localStorage içinde ve sunucuda da bazı yararlı verileri varsa? En basit yaklaşım birini diğeri ile geçersiz kılmaktır, ama hangisi? İçe aktarıyorsak, o zaman yerel olan geçersiz kılınır, dışa aktarılırsa, sunucudaki olan geçersiz kılınır, senkronize edilirsek, eski olan geçersiz kılınır.

Ancak, bazı durumlarda aynı kullanıcının iki localStation'unu birleştirmek istersiniz, bu nedenle:

yeni elemanlar

Bir eleman yeni ise, bu oturumda yaratıldığı bir şekilde bilinmesi gerektiğine inanıyorum, bu da yararlıdır, çünkü bu, bir araya geldiğimiz diğer oturumda bu yeni öğenin kaldırılmadığı anlamına gelir ve bu yüzden eklemek sezgiseldir.

eleman değişiklikleri

İki durumda aynı eleman farklıysa, daha yeni sürüm geçerli olmalıdır.

kaldırılan elemanlar

İlginç durum, bir oturumda kaldırıldığı ve diğer oturumda güncelleştirildiği zamandır. Bu durumda yeni değişikliklerin geçerli olması gerektiğini düşünüyorum.

Bununla birlikte, en iyi çabalarınıza rağmen, kullanıcılar yine de işleri (ve yazılımınızı da) karıştırıyor olabilir, bu nedenle sunucunuzdaki her oturumu yedeklemek mantıklıdır.

— Lajos Arpad
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.