Session Storage Local Storage, jquery, bootsrtap use React js

-

 



A.   Session Storage

Session Storage adalah sebuah fitur untuk menyimpan data pada web browser (client side). Struktur dari session storage berupa key dan value di mana value hanya dapat disimpan dengan tipe String. Jika data yang akan disimpan berupa array atau object, kita harus mengonversi data tersebut ke bentuk JSON menggunakan fungsi JSON.stringify().

Data yang disimpan pada session storage hanya berlaku dan dapat diakses pada satu tab saja. Oleh karena itu data pada session storage tidak dapat diakses pada tab atau window lain meskipun membuka halaman yang sama. Selain itu data pada session storage akan expired atau hilang saat tab atau window ditutup. Untuk membuka isi dari session storage dengan membuka Inspect Element pada web browser kemudian membuka tab Application à Session Storage.





A.   Local Storage

Local Storage adalah sebuah fitur untuk menyimpan data pada web browser (client side). Struktur dari local storage berupa key dan value di mana value hanya dapat disimpan dengan tipe String. Jika data yang akan disimpan berupa array atau object, kita harus mengonversi data tersebut ke bentuk JSON menggunakan fungsi JSON.stringify().

Berbeda dengan session storage, data yang disimpan pada local storage dapat diakses di beberapa tab yang berbeda. Data pada local storage akan tidak memiliki masa expired jika data tersebut tidak dihapus. Selain itu data pada local storage tetap tersimpan meskipun browser telah ditutup. Untuk membuka isi dari local storage dengan membuka Inspect Element pada web browser kemudian membuka tab Application à Local Storage.


A.   Manage Session Storage dan Local Storage



D.   Langkah Praktikum

Pada artikel kali ini  Silakan ikuti Langkah-langkah berikut ini untuk menerapkan Session Storage.

1.    Pada file Gallery.js, tambahkan state baru dengan nama “user” berupa data string dan tambahkan sebuah fungsi setUser() untuk menyimpan nama user pada saat halaman ini di-load.



2.    Buatlah fungsi componentDidMount() untuk memanggil fungsi setUser() yang dibuat sebelumnya. Fungsi componentDidMount() adalah fungsi yang dijalankan setelah semua komponen di dalam fungsi render terpasang. Dalam arti lain fungsi ini dijalankan setelah fungsi render() telah dijalankan.


3.    Tambahkan satu komponen di dalam fungsi render untuk menampilkan nilai state user.

4.    Simpan dan jalankan kembali server pada project ini dengan npm start.

5.    Load halaman Gallery dan kita akan diminta untuk memasukkan nama.








6.    Coba buka halaman Gallery pada tab yang berbeda, dan lihat data yang disimpan pada Session Storage.

7.    Untuk menerapkan penggunaan Local Storage, silakan ganti sessionStorage menjadi localStorage pada fungsi setUser().

8.    Lakukan Langkah 5 dan 6 untuk membuktikan perbedaan Session Storage dan Local Storage.

E.   Pembuatan “Cart Shop” dengan Local Storage

Masih dalam project yang sama dengan sebelumnya, kita akan menambkan fitur “Tambah ke Keranjang Belanja” pada list buku yang ditampilkan. Adapun langkah-langkahnya adalah sebagai berikut.

1.    Pada file Card.js di folder components, tambahkan satu button baru untuk sebagai control user untuk memilih item yang ditambahkan pada keranjang belanja.

2. Pada file Gallery.js, tambahkan fungsi untuk menambah item yang dipilih user ke keranjang belanja dengan nama fungsi addToCart.

3.    Tambkan prop onCart pada pemanggilan komponen Card pada fungsi render.

4.    Simpan dan jalankan kembali project dengan npm start

5.    Pilih item atau buku dengan klik tombol “tambah ke keranjang belanja”.





Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat CRUD dengan Node.js, sequlize, MySQL dan API

-
Gambar
  Dalam tutorial kali ini, saya akan sharing bagaimana membuat aplikasi CRUD (Create Read Update Delete) menggunakan node.js dan mysql. Persiapan Database   1. Buatlah sebuah database MYSQL dengan nama “crud” lalu untuk tabel dan isinya akan dibuat dengan menggunakan Library Sequelize.   2. Di bawah adalah tabel yang akan dibuat   Persiapan Project BackEnd NodeJS   1. Siapkan folder project bernama “CRUD”. 2. Lakukan inisiasi dengan menggunakan command npm init –y 3. Lakukan install Library Sequelize secara global dengan command npm install -g sequelize-cli 4. Install library yang dibutuhkan yaitu sequelize, mysql2, express, dengan command npm install sequelize mysql2 express, cors, 5. Eksekusi perintah berikut untuk mengijinkan pemberian perintah sequelize Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted   6. Lakukan inisiasi sequelize dengan command     sequelize init   7. Kemudian siapka...
Baca selengkapnya

React Router

-
Gambar
    Menyiapkan Project  React JS 1.     Pada folder utama toko-komputer , tambahkan folder bernama frontend 2.     Pada folder frontend , buat project ReactJs menggunakan perintah berikut npx create-react-app admin-toko-komputer 3.     Install library yang dibutuhkan dengan perintah berikut npm install  bootstrap dotenv react-router-dom --save 2.     Cek file package.json untuk melihat keberhasilan instalasi, library yang telah berhasil diinstall akan ditampilkan pada dependencies   Note: Praktikum ini menggunakan setting port 4000 Membuat Halaman dengan react-router-dom 1.     Pada file index.js (dalam folder src ) import bootstrap dan react-router-dom kemudian ubah code seperti berikut >     2. Dalam folder src, tambahkan folder component    Di dalam folder component , tambahkan file Navbar.js kemudian tuliskan code seperti berikut   4. dalam folder src, ...
Baca selengkapnya

Memulai NODE JS Untuk Pemula

-
Gambar
    Node JS? Node.js adalah runtime Javascript yang dibangun di mesin  Javascript  V8 Chrome   untuk memudahkan pembuatan aplikasi jaringan cepat  dan skalabel. Seperti yang di jelaskan pada situs resminya  nodejs.org : Node.js adalah server-side  JavaScript  , Node.js dirancang untuk mengeksekusi program   secara multithread . Multi-Threading  adalah proses dengan thread yang banyak dan mengerjakan lebih dari satu tugas dalam satu waktu. Dalam contoh input "hello world", dalam banyak koneksi dapat ditangani secara bersamaan. Setelah setiap koneksi, callback aktif , tetapi jika tidak ada pekerjaan yang harus diselesaikan, Node.js akan tidur.   Kenapa Menggunakan Node.JS? Node.js menggunakan model non-blocking I/O dan berjalan dengan mekanisme event driven yang bisa menangani banyak perintah atau request apa saja yang datang dari browser secara bersa...
Baca selengkapnya