Javascript Cookie - Mengingat nama pengguna versi 2

Berawal dari membaca javascript cookie yang ada diblog DTE setelah itu aku berpikir bagaimana sih caranya agar, saat orang mengisi sebuah input ( mengisi nama ) dan mengklik sebuah button maka mereka akan melihat hasil dari pengisian input tadi dan mengingatnya menggunakan Javascript Cookie sebenarnya cara ini sudah saya temmukan diblog INI tapi entah kenapa udah aku coba secara offline dan online ternyata gak bisa, lalu aku cari dan cari lagi akhirnya aku menemukan script persis seperti keinginanku yang sudah aku post Disini dan yang berhasil aku terapkan adalah yang dari W3Schools tersebut.

Untuk kali ini script Cookie yang aku gunakan yaitu dari QuirksMode

function createCookie(name, value, days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = "; expires=" + date.toGMTString();
 } else {
  var expires = "";
 }
 document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
}

function eraseCookie(name) {
 createCookie(name, "", -1);
}

Nah setelah gagal melulu akhirnya sampe juga ketahap Finish sampe pusing kepalaku dibuatnya, aku menulis fungsi javascriptnya seperti ini..

function cr() {
var d = document.getElementById("d").value,
    o = document.getElementById("output");
//buat peringatan jika input kosong atau tidak diisi
if(d.length == 0){
alert("Jangan dikosongkan")
} else {
//masukan nilai input kedalam elemen dengan ID output
o.innerHTML = "Kunjungan pertama anda " + d;
//Buat Cookie dengan nama wtf, dan value_nya adalah isi dari input tadi
createCookie("wtf",d,9);
}
}
var o = document.getElementById("output"),
    g = readCookie("wtf");//membaca cookie dengan nama wtf
if(g){
//jika browser sudah membaca cookienya maka ketika pengunjung
//datang lagi keblog kita dia akan melihat teks
//Kita berjumpa lagi + nama user
o.innerHTML = "<b>Kita berjumpa Lagi</b> " + readCookie("wtf");
}

Dan dibawah kode HTML dari script tersebut...

<div class='nama'>
<input id='d' type='text' placeholder='Tulis nama anda'></input>
<p><button onclick='cr()'>Tulis Nama</button></p>
<div id='output'>Nama Anda</div>
</div>

Dibawah ini cssnya

.nama {
width: 300px;
margin: 10px auto 0;
background: #A394DF;
padding: 10px;
border-top: 5px solid #555
}
.nama input {
width:  99%;
padding: 5px 0;
margin: 5px 0
}
.nama button {
padding: 5px 10px;
margin: 0 0 5px 0;
}
.nama #output {
padding: 5px 10px;
background: #6A66C0;
color: #eee;
font: normal 13px/20px Arial,sans-serif
}

Cara penerapannya..

Simpan javascript dibawah ini diatas kode </body>

<script type="text/javascript">
//<![CDATA[
function createCookie(name, value, days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = "; expires=" + date.toGMTString();
 } else {
  var expires = "";
 }
 document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
}

function eraseCookie(name) {
 createCookie(name, "", -1);
}
//batas cookie
function cr() {
var d = document.getElementById("d").value,
    o = document.getElementById("output");
if(d.length == 0){
alert("Jangan dikosongkan")
} else {
o.innerHTML = "Kunjungan pertama anda " + d;
createCookie("wtf",d,9);
}
}
var o = document.getElementById("output"),
    g = readCookie("wtf");
if(g){
o.innerHTML = "<b>Kita berjumpa Lagi</b> " + readCookie("wtf") ;
}
//]]>
</script>

Simpan kode CSS diatas kode ]]></b:skin> dan terakhir kode HTML simpan dibagian body atau bisa dengan cara menambahkan Gadget HTML/Javascript lalu simpan kode HTML tersebut didalamnya.

DEMO

Isikan nama anda lalu refresh/perbarui halamannya