Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Menyimpan String Data Dengan HTML5 Localstorage

  • Mei 3, 2013
  • admin
4

SHARES

ShareTweet

HTML5 LocalstorageSalah satu fitur yang akan kita bahas dan implementasikan pada tutorial kali ini adalah mengenai Localstorage. HTML5 memiliki fitur ini dan perlu kita ketahui bahwa Localstorage mempunyai fungsi sebagai penyimpan data (string) sementara aplikasi HTML5. Selain untuk aplikasi web berbasis desktop, Localstorage juga dapat dimanfaatkan juga untuk aplikasi mobile Phonegap.

Mari kita berkenalan dengan HTML5 Localstorage. Sebuah fitur teknologi HTML5 yang memecahkan permasalahan API standar pihak ketiga untuk media penyimpanan sementara pada browser. Sebelumnya jika pembaca pernah mendengar Google Gears, sebuah plugin tambahan untuk browser yang memungkinkan developer menyimpan data sementara. Kemudian ada juga Flash to Javascript dan Dojo Toolkit yang fungsinya sama. Namun kesemua teknologi storage tersebut terkadang merepotkan pengembang dalam pembuatan aplikasi karena API yang berbeda-beda. Hingga kemudian munculah HTML5 localstorage sebagai pemecahannya.

HTML5 Localstorage dapat kita ibaratkan sebuah Cookie Browser. Fitur ini akan menyimpan data string ke dalam localstorage browser, dan akan tetap tersimpan meskipun kita menutup Tab browser atau menutup browser.

Contents

  • 1 Tutorial
  • 2 Baca juga:

Tutorial

Sebagai persiapan adalah kita membutuhkan browser yang telah support terhadap HTML5 Localstorage, berikut diantaranya :

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome (Recommended)
  • Safari

Buka folder localhost Anda, buat folder baru bernama “html5localstorage“. Kita akan membuat file index.html yang berisi source code HTML5 Localstorage untuk mengirim data dari input ke database browser. Berikut adalah isi file index.html :


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8“>
<title>Percobaan HTML5 Local Storage</title>
<script type=”text/javascript” charset=”utf-8” src=”jquery.js“></script>
<script type=”text/javascript” >
// fungsi simpan(), ketika tombol diklik maka string
// di dalam input akan tersimpan ke dalam storage browser
function simpan() {
var storage = document.getElementById(‘nama’).value;
localStorage.setItem(‘Text’,storage);
}
// tampil() akan menampilkan string yang tersimpan
// ke tag div yang ditentukan “hasil”
function tampil() {
var tampilNama = localStorage.getItem(‘Text’);
if (tampilNama) {
x = document.getElementById(‘tampil’);
x.innerHTML=tampilNama;
}
}
// fungsi untuk menghapus localstorage browser
function hapus() {
localStorage.removeItem(‘Text’);
}
</script>
</head>
<body>
<input type=”text” id=”nama” />
<input type=”button” value=”Simpan” onclick=”simpan()” />
<input type=”button” value=”Tampil” onclick=”tampil()” />
<input type=”button” value=”Hapus” onclick=”hapus()” />
<div id=”tampil“></div>
</body>
</html>

view raw

index.html

hosted with ? by GitHub

Hasil file index.html akan tampil :

Form Input

Form Input

Lihat Demo Download Source

Index.html menampilkan sebuah form input dan tiga buah button. Ketika kita selesai mengetikkan string ke dalam browser, dan meng-klik button Simpan, maka string tersebut akan tersimpan di Localstorage. Hasilnya bisa kita lihat melalui Inspect Element, lalu pilih Resource -> Local Storage (localhost), seperti di bawah ini :

String "percobaan" tersimpan di localstorage Chrome

String “percobaan” tersimpan di localstorage Chrome

Baca juga:

  1. Menampilkan Kondisi Online dan Offline Dengan HTML5
  2. Berkreasi Dengan Google Maps dan HTML5 Geolocation
  3. Quake II, Game 3D Yang Mengusung Teknologi HTML5
  4. Menyimpan Gambar Offline Ke Browser Menggunakan imgcache.js
  5. Urusan HTML5, Google Chrome Masih Merajai
 
admin

Previous Article
  • Teknologi

Teknologi Tidak Menarik, Kita Tertinggal Jauh

  • Mei 2, 2013
  • admin
View Post
Next Article
  • Teknologi

Menampilkan Kondisi Online dan Offline Dengan HTML5

  • Mei 4, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.