diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index d0483f3a3..d44e8f1b2 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -1,83 +1,82 @@ # LocalStorage, sessionStorage -Web storage objects `localStorage` and `sessionStorage` allow to save key/value pairs in the browser. +Objek penyimpanan web `localStorage` dan `sessionStorage` memungkinkan untuk menyimpan pasangan *key*/*value* di peramban. -What's interesting about them is that the data survives a page refresh (for `sessionStorage`) and even a full browser restart (for `localStorage`). We'll see that very soon. +Yang menarik dari mereka adalah bahwa data bertahan dari refresh halaman (untuk `sessionStorage`) dan bahkan ketika peramban dimulai ulang secara penuh (untuk `localStorage`). Kita akan melihatnya segera. -We already have cookies. Why additional objects? +Kita sudah memiliki cookies. Mengapa perlu tambahan objek? -- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. -- Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript. -- The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other. +- Tidak seperti cookies, objek penyimpanan web tidak dikirim ke server pada setiap permintaan. Karena itu, kita bisa menyimpan lebih banyak. Sebagian besar peramban mengizinkan setidaknya 2 *megabyte* data (atau lebih) dan memiliki pengaturan untuk konfigurasinya. +- Juga tidak seperti cookies, server tidak dapat memanipulasi objek penyimpanan melalui HTTP header. Semuanya dilakukan dalam JavaScript. +- Penyimpanan terikat kepada asalnya (domain/protokol/port triplet). Artinya, protokol atau subdomain yang berbeda menyimpulkan objek penyimpanan yang berbeda, mereka tidak dapat mengakses data satu sama lain. -Both storage objects provide same methods and properties: +Kedua objek penyimpanan menyediakan *method* dan properti yang sama: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key on a given position. -- `length` -- the number of stored items. +- `setItem(key, value)` -- menyimpan pasangan *key*/*value*. +- `getItem(key)` -- mendapatkan *value* dengan sebuah *key*. +- `removeItem(key)` -- menghapus *key* beserta *value*-nya. +- `clear()` -- menghapus semuanya. +- `key(index)` -- mendapatkan *key* pada posisi tertentu. +- `length` -- jumlah item yang disimpan. -As you can see, it's like a `Map` collection (`setItem/getItem/removeItem`), but also allows access by index with `key(index)`. +Seperti yang Anda lihat, ini seperti koleksi `Map` (`setItem/getItem/removeItem`), tetapi juga memungkinkan akses berdasarkan indeks dengan `key(index)`. -Let's see how it works. +Mari kita lihat cara kerjanya. -## localStorage demo +## Demo localStorage -The main features of `localStorage` are: +Fitur utama `localStorage` adalah: -- Shared between all tabs and windows from the same origin. -- The data does not expire. It remains after the browser restart and even OS reboot. +- Dibagikan antara semua *tab* dan *window* dari *origin* yang sama. +- Data tidak kedaluwarsa. Data tetap tersimpan setelah peramban *restart* dan bahkan setelah OS *reboot*. -For instance, if you run this code... +Misalnya, jika Anda menjalankan kode ini... ```js run localStorage.setItem('test', 1); ``` -...And close/open the browser or just open the same page in a different window, then you can get it like this: +...Dan kemudian menutup/membuka peramban atau hanya membuka halaman yang sama di jendela yang berbeda, maka Anda bisa mendapatkannya seperti ini: ```js run alert( localStorage.getItem('test') ); // 1 ``` -We only have to be on the same origin (domain/port/protocol), the url path can be different. +Kita hanya harus berada di *origin* yang sama (domain/port/protocol), *path* urlnya bisa berbeda. -The `localStorage` is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one. +`localStorage` dibagi antara semua *window* dengan *origin* yang sama, jadi jika kita mengatur data di satu *window*, perubahan akan terlihat di *window* lain. -## Object-like access +## Akses seperti objek -We can also use a plain object way of getting/setting keys, like this: +Kita juga dapat menggunakan cara sebuah objek biasa untuk mendapatkan/mengatur *key*, seperti ini: ```js run -// set key +// mengatur key localStorage.test = 2; -// get key +// mendapatkan key alert( localStorage.test ); // 2 -// remove key +// menghapus key delete localStorage.test; ``` -That's allowed for historical reasons, and mostly works, but generally not recommended, because: +Itu diizinkan karena alasan historis, dan sebagian besar berfungsi, tetapi umumnya tidak disarankan, karena: -1. If the key is user-generated, it can be anything, like `length` or `toString`, or another built-in method of `localStorage`. In that case `getItem/setItem` work fine, while object-like access fails: +1. Jika *key* dibuat oleh pengguna, itu bisa apa saja, seperti `length` atau `toString`, atau *method* bawaan `localStorage` lainnya. Dalam hal itu `getItem/setItem` berfungsi dengan baik, sementara akses seperti objek akan gagal: ```js run let key = 'length'; localStorage[key] = 5; // Error, can't assign length ``` +2. Ada *event* `storage`, yang dipicu saat kita mengubah data. *Event* itu tidak terjadi untuk akses seperti objek. Kita akan melihatnya nanti di bab ini. -2. There's a `storage` event, it triggers when we modify the data. That event does not happen for object-like access. We'll see that later in this chapter. +## Pengulangan pada keys -## Looping over keys +Seperti yang telah kita lihat, *method* menyediakan fungsionalitas "mendapatkan/mengatur/menghapus dengan *key*". Tetapi bagaimana cara mendapatkan semua *value* atau *key* yang disimpan? -As we've seen, the methods provide "get/set/remove by key" functionality. But how to get all saved values or keys? +Sayangnya, objek penyimpanan tidak bisa dilakukan iterasi. -Unfortunately, storage objects are not iterable. - -One way is to loop over them as over an array: +Salah satu caranya adalah dengan mengulangnya sebagai senarai (array): ```js run for(let i=0; i { // same as window.addEventListener('storage', event => { +// memicu pembaruan yang dibuat ke penyimpanan yang sama dari dokumen lain +window.onstorage = event => { //sama seperti window.addEventListener('storage', event => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; @@ -210,40 +207,40 @@ window.onstorage = event => { // same as window.addEventListener('storage', even localStorage.setItem('now', Date.now()); ``` -Please note that the event also contains: `event.url` -- the url of the document where the data was updated. +Harap perhatikan bahwa *event* juga berisi: `event.url` -- url dokumen tempat data diperbarui. -Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `event.storageArea` references the one that was modified. We may even want to set something back in it, to "respond" to a change. +Selain itu, `event.storageArea` berisi objek penyimpanan -- *event*-nya sama untuk `sessionStorage` dan `localStorage`, jadi `event.storageArea` merujuk ke yang telah dimodifikasi. Kita bahkan mungkin ingin mengatur sesuatu kembali di dalamnya, untuk "merespons" perubahan. -**That allows different windows from the same origin to exchange messages.** +**Itu memungkinkan window yang berbeda dari origin yang sama untuk bertukar pesan.** -Modern browsers also support [Broadcast channel API](mdn:/api/Broadcast_Channel_API), the special API for same-origin inter-window communication, it's more full featured, but less supported. There are libraries that polyfill that API, based on `localStorage`, that make it available everywhere. +Peramban modern juga mendukung [Broadcast channel API](mdn:/api/Broadcast_Channel_API), API khusus untuk komunikasi antar-jendela dengan origin yang sama, fiturnya lebih lengkap, tetapi kurang didukung. Ada *libraries* yang melakukan polifill API tersebut, berdasarkan `localStorage`, yang membuatnya tersedia di mana saja. -## Summary +## Ringkasan -Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser. -- Both `key` and `value` must be strings. -- The limit is 5mb+, depends on the browser. -- They do not expire. -- The data is bound to the origin (domain/port/protocol). +Objek penyimpanan web `localStorage` dan `sessionStorage` memungkinkan untuk menyimpan *key*/*value* di peramban. +- Baik `key` dan `value` harus berupa string. +- Batasnya adalah 5mb+, tergantung pada peramban. +- Mereka tidak kedaluwarsa. +- Data terikat pada *origin* (domain/port/protokol). | `localStorage` | `sessionStorage` | |----------------|------------------| -| Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin | -| Survives browser restart | Survives page refresh (but not tab close) | +| Dibagikan antara semua tab dan window dengan origin yang sama | Terlihat dalam tab browser, termasuk iframe dari origin yang sama | +| Bertahan dari restart peramban | Bertahan dari refresh halaman (tetapi tidak dengan menutup tab) | API: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key number `index`. -- `length` -- the number of stored items. -- Use `Object.keys` to get all keys. -- We access keys as object properties, in that case `storage` event isn't triggered. +- `setItem(key, value)` -- menyimpan pasangan *key*/*value*. +- `getItem(key)` -- mendapatkan *value* dengan *key*. +- `removeItem(key)` -- menghapus *key* beserta *value*-nya. +- `clear()` -- menghapus semuanya. +- `key(index)` -- mendapatkan nomor *key* `index`. +- `length` -- jumlah item yang disimpan. +- Gunakan `Object.keys` untuk mendapatkan semua *key*. +- Kita mengakses *key* sebagai properti objek, dalam hal ini *event* `storage` tidak dipicu. -Storage event: +*Event storage*: -- Triggers on `setItem`, `removeItem`, `clear` calls. -- Contains all the data about the operation (`key/oldValue/newValue`), the document `url` and the storage object `storageArea`. -- Triggers on all `window` objects that have access to the storage except the one that generated it (within a tab for `sessionStorage`, globally for `localStorage`). +- Pemicu pada panggilan `setItem`, `removeItem`, `clear`. +- Berisi semua data tentang operasi (`key/oldValue/newValue`), dokumen `url` dan objek penyimpanan `storageArea`. +- Memicu semua objek `window` yang memiliki akses ke penyimpanan kecuali yang membuatnya (dalam tab untuk `sessionStorage`, secara global untuk `localStorage`).