// 設置一個帶有2分鐘過期時間的問候語
lscache.set('greeting', 'Hello World!', 2);

// 獲取并顯示問候語
console.log(lscache.get('greeting'));

// 刪除問候語
lscache.remove('greeting');

// 刷新整個緩存項目
lscache.flush();

// 只刷新過期的項目
lscache.flushExpired();

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":

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

// 從對象中檢索數(shù)據(jù)
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

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);
});

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); // 數(shù)字
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:

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

// 監(jiān)聽消息
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());

// 循環(huán)遍歷所有存儲的值
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.

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!