9 perpustakaan JavaScript kerana bekerja dengan storan tempatan

HTML5 API Penyimpanan Tempatan (sebahagian daripada Penyimpanan Web) mempunyai sokongan penyemak imbas yang sangat baik dan sedang digunakan dalam lebih banyak aplikasi. Ia mempunyai API yang mudah, tetapi ia juga mempunyai beberapa kelemahan yang serupa dengan kuki.

Saya telah menemui beberapa alat dan perpustakaan menggunakan API LocalStorage sepanjang tahun lalu atau lebih, jadi saya telah menyusunnya ke dalam jawatan ini dengan beberapa contoh kod dan perbincangan ciri.

mata utama

API Penyimpanan Tempatan HTML5 disokong secara meluas dan menjadi lebih biasa dalam aplikasi, tetapi ia juga mempunyai beberapa batasan yang serupa dengan kuki. Pelbagai perpustakaan JavaScript telah dibangunkan untuk memperbaiki dan memperluaskan keupayaan mereka.
Lockr, Store.js, dan LSCache menyediakan pembalut untuk API LocalStorage, menyediakan kaedah dan fungsi penggunaan tambahan. Ini termasuk menyimpan jenis data yang berbeza tanpa penukaran manual, sokongan penyemak imbas yang lebih mendalam, dan simulasi sistem caching objek memori memcached.
Secstore.js dan LocalForage menyediakan lebih banyak ciri profesional. Secstore.js menambah lapisan keselamatan melalui Perpustakaan Crypto Stanford JavaScript, manakala LocalForage yang dibina oleh Mozilla menyediakan API penyimpanan tak segerak menggunakan IndexedDB atau WebSQL.
Perpustakaan lain seperti Basil.js dan LZ-String menyediakan ciri-ciri unik. Basil.js adalah API LocalStorage, sessionStorage, dan cookie yang bersatu yang membolehkan anda menentukan ruang nama, keutamaan kaedah penyimpanan, dan storan lalai. LZ-string membolehkan penyimpanan sejumlah besar data dalam localStorage melalui mampatan.

Lockr

Lockr adalah pembalut untuk API LocalStorage yang membolehkan anda menggunakan banyak kaedah dan ciri yang berguna. Sebagai contoh, sementara LocalStorage terhad kepada penyimpanan rentetan, Lockr membolehkan anda menyimpan jenis data yang berbeza tanpa perlu mengubahnya sendiri:

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

Fungsi lain termasuk:

Gunakan kaedah lokr.get () untuk mengambil semua pasangan nilai utama
menyusun semua pasangan nilai utama ke dalam array menggunakan kaedah lockr.getall ()
Gunakan kaedah lockr.flush () untuk memadam semua pasangan nilai kunci yang disimpan
Tambah/keluarkan nilai di bawah kekunci hash menggunakan lockr.sadd dan lockr.srem

Jambatan Penyimpanan Tempatan

Perpustakaan 1KB untuk menggunakan LocalStorage sebagai saluran komunikasi untuk memudahkan pertukaran mesej antara tab dalam penyemak imbas yang sama. Sebaik sahaja perpustakaan dimasukkan, inilah kod sampel yang boleh anda gunakan:

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

Seperti yang ditunjukkan, kaedah hantar () mencipta dan menghantar mesej, dan kaedah melanggan () membolehkan anda mendengar mesej yang ditentukan. Anda boleh membaca lebih lanjut mengenai perpustakaan dalam catatan blog ini.

Barn

Perpustakaan ini menyediakan API seperti redis yang menyediakan "lapisan penyimpanan berterusan yang cepat dan atomisasi" di atas LocalStorage. Berikut adalah coretan kod sampel yang diambil dari readme repo. Ia menunjukkan banyak kaedah yang ada.

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

Ciri -ciri lain dari API

termasuk keupayaan untuk menggunakan nilai permulaan/akhir untuk mendapatkan julat, mendapatkan array item, dan memampatkan keseluruhan kedai data untuk menjimatkan ruang. Repo ini mengandungi rujukan lengkap untuk semua kaedah dan fungsi mereka.

store.js

Ini adalah pembungkus lain yang serupa dengan Lockr, tetapi kali ini ia menyediakan sokongan penyemak imbas yang lebih mendalam melalui sandaran. Readme menerangkan, "Store.js menggunakan LocalStorage apabila tersedia dan jatuh kembali kepada tingkah laku userdata di IE6 dan IE7. Tidak ada kilat untuk melambatkan beban halaman. Tidak ada kuki untuk meningkatkan beban permintaan rangkaian."

API Asas dijelaskan dalam komen dalam kod berikut:

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

Di samping itu, terdapat beberapa ciri yang lebih canggih:

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

ReadMe on GitHub Repo butir -butir kedalaman sokongan penyemak imbas dan potensi bug dan perangkap untuk dipertimbangkan (contohnya, beberapa pelayar tidak membenarkan penyimpanan tempatan dalam mod privasi).

lscache

LSCache adalah pembungkus LocalStorage yang lain, tetapi dengan beberapa ciri tambahan. Anda boleh menggunakannya sebagai API LocalStorage yang mudah atau menggunakan fungsi meniru memcached (sistem caching objek memori).

lscache mendedahkan kaedah berikut, yang diterangkan dalam komen dalam kod:

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

Seperti perpustakaan sebelumnya, perpustakaan ini juga mengendalikan siri, jadi anda boleh menyimpan dan mengambil objek:

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

Akhirnya, LSCache membolehkan anda membahagikan data ke dalam "baldi". Lihat kod ini:

Perhatikan bahawa dalam log kedua, hasilnya adalah batal. Ini kerana saya menubuhkan baldi tersuai sebelum melayari hasilnya. Sebaik sahaja saya menubuhkan baldi, tiada apa yang ditambah kepada lscache sebelum ini tidak boleh diakses, walaupun saya cuba menyegarkannya. Hanya item dalam baldi "lain" yang boleh diakses atau disegarkan. Kemudian apabila saya menetapkan semula baldi saya dapat mengakses data asal saya sekali lagi.

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

secstore.js

Secstore.js adalah API Penyimpanan Data yang menambah lapisan keselamatan pilihan melalui Perpustakaan Crypto Stanford JavaScript. Secstore.js membolehkan anda memilih kaedah penyimpanan: LocalStorage, sessionStorage, atau cookie. Untuk menggunakan secstore.js, anda juga mesti memasukkan perpustakaan SJCL.JS yang disebut tadi.

Berikut adalah contoh yang menunjukkan cara menyimpan beberapa data dengan pilihan enkripsi yang ditetapkan kepada "benar":

Nota kaedah set () yang digunakan, yang melepasi pilihan yang anda tentukan (termasuk data tersuai) dan fungsi panggil balik yang membolehkan anda menguji hasilnya. Kemudian, kita boleh menggunakan kaedah GET () untuk mendapatkan data:

lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// 从对象中检索数据
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

Jika anda ingin menggunakan sessionStorage atau cookies dan bukannya localStorage di secstore.js, anda boleh menentukannya dalam pilihan:

lscache.set('website', 'SitePoint', 2);
console.log(lscache.get('website')); // 'SitePoint'

lscache.setBucket('other');
console.log(lscache.get('website')); // null

lscache.resetBucket();
console.log(lscache.get('website')); // 'SitePoint'

var storage = new secStore;
var options = {
    encrypt: true,
      data: {
        key: 'data goes here'
      }
    };

storage.set(options, function(err, results) {
  if (err) throw err;
  console.log(results);
});

Localforage

Perpustakaan ini dibina oleh Mozilla menyediakan anda dengan API seperti LocalStorage yang mudah, tetapi menggunakan penyimpanan tak segerak melalui IndexedDB atau WebSQL. API adalah sama seperti localStorage (getItem (), setItem (), dll.), Kecuali APInya tidak segerak dan sintaks memerlukan penggunaan panggilan balik.

Oleh itu, anda tidak akan mendapat nilai pulangan tanpa mengira sama ada anda menetapkan atau mendapatkan nilai, tetapi anda boleh mengendalikan data yang dihantar ke fungsi panggil balik dan (pilihan) mengendalikan ralat:

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象

beberapa perkara lain mengenai LocalForage:

• Sokongan JavaScript Promise
• seperti perpustakaan lain, ia bukan sahaja terhad kepada penyimpanan rentetan, tetapi juga menetapkan dan mendapatkan objek
• membolehkan anda menetapkan maklumat pangkalan data menggunakan kaedah Config ()

basil.js

Basil.js digambarkan sebagai LocalStorage, SesiStorage, dan Cookie API yang bersatu, yang mengandungi beberapa ciri yang unik dan sangat mudah digunakan. Kaedah asas boleh digunakan seperti berikut:

// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

anda juga boleh menggunakan basil.js untuk menguji jika localstorage tersedia:

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

basil.js juga membolehkan anda menggunakan cookies atau sessionstorage:

// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

// 获取'website'
store.get('website');

// 删除'website'
store.remove('website');

// 清除所有键
store.clear();

Akhirnya, dalam objek pilihan, anda boleh menggunakan objek pilihan untuk menentukan yang berikut:

• ruang nama untuk bahagian data yang berlainan
• urutan keutamaan kaedah penyimpanan yang akan digunakan
• Kaedah penyimpanan lalai
• tarikh tamat tempoh kuki

// 存储对象字面量；在后台使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 获取存储的对象；在后台使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 获取所有存储的值
console.log(store.getAll());

// 循环遍历所有存储的值
store.forEach(function(key, val) {
  console.log(key, val);
});

lz-string

Utiliti LZ-String membolehkan anda menyimpan sejumlah besar data dalam LocalStorage dengan menggunakan mampatan, dan ia sangat mudah digunakan. Selepas memasukkan perpustakaan di halaman, anda boleh melakukan perkara berikut:

// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();

Sila perhatikan penggunaan kaedah kompres () dan decompress (). Komen dalam kod di atas menunjukkan nilai panjang sebelum dan selepas mampatan. Anda dapat melihat betapa bermanfaatnya ini, kerana storan pelanggan sentiasa terhad di ruang angkasa.

Seperti yang dijelaskan dalam dokumentasi perpustakaan, anda boleh memilih untuk memampatkan data ke dalam UINT8Array (jenis data yang lebih baru dalam JavaScript) dan juga memampatkan data untuk menyimpan secara luaran pada klien.

Mentions Honorable

Alat di atas boleh membantu anda melakukan hampir semua yang anda mahu lakukan di LocalStorage, tetapi jika anda mencari lebih banyak, berikut adalah beberapa alat dan perpustakaan yang lebih berkaitan yang mungkin anda ingin periksa.

• Lokijs-Kedai data berorientasikan dokumen yang cepat dan memori untuk node.js, penyemak imbas, dan Cordova.
• penyimpanan klien AngularJS - penyimpanan pelanggan ruang nama JS. Tulis ke LocalStorage dan kembali ke Cookie. Tiada kebergantungan luaran kecuali teras sudut;
• Alasql.js - Pangkalan Data JavaScript SQL dan Node.js untuk penyemak imbas. Mengendalikan jadual berkaitan tradisional dan data JSON bersarang (NoSQL). Eksport, menyimpan dan mengimport data dari LocalStorage, IndexedDB, atau Excel.
• Sudut-Locker-Abstraksi mudah dan boleh dikonfigurasikan penyimpanan tempatan/sesi dalam projek sudut, menyediakan API licin yang kuat dan mudah digunakan.
• JSCACHE - Dayakan cache fail JavaScript, CSS Stylesheets, dan imej menggunakan LocalStorage.
• largelocalstorage-Mengatasi pelbagai kelemahan penyemak imbas dan memberikan storan nilai utama yang besar di sisi klien.

Adakah anda tahu perpustakaan lain?

Jika anda telah membina beberapa alat untuk meningkatkan penyimpanan klien di atas API LocalStorage atau alat yang berkaitan, jangan ragu untuk memberitahu kami dalam komen.

(seluruh artikel adalah FAQ, yang telah ditulis semula dan diselaraskan mengikut teks asal, dan niat asal dikekalkan)

Soalan Lazim mengenai JavaScript Repositori Tempatan (Soalan Lazim)

Q: Apakah manfaat menggunakan repositori tempatan JavaScript?

A: JavaScript Repository Local memberikan banyak faedah. Mereka menyediakan cara yang lebih berkesan untuk menyimpan data di sisi klien, yang dapat meningkatkan prestasi aplikasi web dengan ketara. Perpustakaan ini juga menyediakan tahap keselamatan yang lebih tinggi daripada kaedah penyimpanan data tradisional, kerana ia membolehkan penyulitan data. Di samping itu, mereka menyediakan antara muka yang lebih mesra pengguna untuk pengurusan data, menjadikannya lebih mudah bagi pemaju menggunakan storan tempatan.

Q: Bagaimanakah storan tempatan berfungsi di JavaScript?

A: Penyimpanan Tempatan di JavaScript membolehkan aplikasi web berterusan dalam menyimpan data dalam penyemak imbas web. Tidak seperti kuki, storan tempatan tidak luput dan tidak dihantar kembali ke pelayan, menjadikannya kaedah penyimpanan data yang lebih efisien. Data yang disimpan dalam storan tempatan disimpan di sesi penyemak imbas, bermakna ia masih tersedia walaupun penyemak imbas ditutup dan dibuka semula.

Q: Bolehkah saya menggunakan storan tempatan untuk data sensitif?

A: Walaupun storan tempatan menyediakan cara yang mudah untuk menyimpan data pada klien, tidak disyorkan untuk menggunakannya untuk menyimpan data sensitif. Ini kerana storan tempatan tidak direka sebagai mekanisme penyimpanan yang selamat. Data yang disimpan dalam storan tempatan boleh diakses dengan mudah dan dimanipulasi menggunakan kod JavaScript mudah. Oleh itu, data sensitif seperti kata laluan, nombor kad kredit, atau maklumat pengguna peribadi tidak boleh disimpan dalam storan tempatan.

Q: Bagaimana Mengurus Data dalam Penyimpanan Tempatan?

A: Menguruskan data dalam storan tempatan melibatkan tiga tindakan utama: menyediakan item, mendapatkan item, dan memadam item. Untuk menetapkan projek, anda boleh menggunakan kaedah setItem (), yang menerima dua parameter: kunci dan nilai. Untuk mendapatkan item, anda boleh menggunakan kaedah getItem (), yang menerima kunci sebagai hujah dan mengembalikan nilai yang sepadan. Untuk memadam item, anda boleh menggunakan kaedah penyingkiran (), yang menerima kunci sebagai hujah.

Q: Apakah repositori JavaScript tempatan yang popular?

A: Terdapat beberapa repositori tempatan yang popular untuk JavaScript, termasuk Store.js, LocalForage, dan JS-Cookie. Store.js menyediakan API yang mudah dan konsisten untuk penyimpanan tempatan dan berjalan pada semua pelayar utama. LocalForage menyediakan API Penyimpanan Asynchronous yang kuat dan menyokong IndexEDDB, WebSQL dan LocalStorage. JS-Cookie adalah perpustakaan ringan untuk mengendalikan kuki yang boleh digunakan sebagai sandaran apabila penyimpanan tempatan tidak tersedia.

Q: Bagaimana untuk memeriksa sama ada storan tempatan tersedia?

A: Anda boleh menggunakan blok percubaan/tangkapan mudah di JavaScript untuk memeriksa sama ada storan tempatan tersedia. Harta tetingkap.LocalStorage boleh digunakan untuk mengakses objek penyimpanan tempatan. Penyimpanan tempatan boleh didapati jika harta ini wujud dan boleh digunakan untuk menubuhkan dan mengambil item.

Q: Apakah had penyimpanan untuk penyimpanan tempatan?

A: Had penyimpanan untuk penyimpanan tempatan berbeza dari penyemak imbas ke pelayar, tetapi biasanya sekitar 5MB. Ini jauh lebih besar daripada had penyimpanan cookies (hanya 4KB). Walau bagaimanapun, lebih baik untuk mengetahui jumlah data yang anda simpan dalam storan tempatan anda, kerana terlalu banyak data dapat melambatkan aplikasi web anda.

Q: Bolehkah storan tempatan dikongsi antara penyemak imbas yang berbeza?

A: Tidak, storan tempatan tidak boleh dikongsi antara pelayar yang berbeza. Setiap pelayar web mempunyai penyimpanan tempatan yang bebas, jadi data yang disimpan dalam satu penyemak imbas tidak akan tersedia di tempat lain. Ini penting apabila mereka bentuk aplikasi web yang bergantung kepada storan tempatan.

Q: Bagaimana untuk membersihkan semua data dalam storan tempatan?

A: Anda boleh menggunakan kaedah yang jelas () untuk membersihkan semua data dalam storan tempatan. Kaedah ini tidak menerima sebarang parameter dan akan memadam semua item dari storan tempatan. Berhati -hati apabila menggunakan kaedah ini, kerana ia secara kekal memadamkan semua data dalam storan tempatan.

Q: Bolehkah storan tempatan digunakan pada peranti mudah alih?

a: Ya, storan tempatan boleh digunakan pada peranti mudah alih. Pelayar web mudah alih yang paling moden menyokong storan tempatan, jadi anda boleh menggunakannya pada desktop dan peranti mudah alih untuk menyimpan data. Walau bagaimanapun, batasan penyimpanan pada peranti mudah alih mungkin rendah, jadi penting untuk mempertimbangkan ini apabila merancang aplikasi web.

Atas ialah kandungan terperinci 9 perpustakaan JavaScript kerana bekerja dengan storan tempatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!