jQuery, Javascript ile localStorage kullanım örneği

11/01/2020 00:52:57

Merhaba,

Güncel tarayıcıların localStorage'ini kullanarak bazı verileri kullanıcının tarayıcısında saklayabiliriz.
Bir çok senaryoda bu çözüm tercih edilebilir benim ise Portal projelerinde ve Cms içerik yönetim sistemi projelerinde çok işime yaradı doğrusu.

Farz edelimki web sitenizin yönetim panelinden yeni bir haber girmek istiyorsunuz ve bu haber içeriği çok uzun.. yazım kuralları, resim eklemeler, süslemeler vs. 30dk'yı geçen bir süre olduğunu düşünelim. session süreside max 20dk. olduğunu düşünür isek işlemleri tamamlayıp EKLE butonuna bastığımızda kullanıcıya session süreniz bitmiştir mesajı verilecektir. bu durumda emekler çöpe gidecek ve yeniden data girişi yapılacaktır. (session süresi uzaltılır, mouse hareket ettiği için session otomatik bir artar çözüm bulunur vs. gibi cevaplar duyar gibiyim.. IIS restart olduğunda, tarayıcı es kaza donduğunda, internet bağlantısı koptuğunda veya çarpıdan kapatıldığı durumlarıda göz ardı etmemek gerekir.)

Çözüm bu verileri yazım esnasında localStorage'te tutup tekrar oturum açılıp kaldığı ekrana gelip localStorage'den yükle denildiğinde işleme hiç veri kaybolmadan devam edebileceğidir.

Aşağıdaki kodlamalar ile bu işlemi backend programlama kullanmadan jquery ve Javascript ile yapabiliyoruz.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>localStorage - test</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {	
	$('#btnclear').click(function(){
		var localStore = window.localStorage;
		localStore.clear();
	});
	$('#linkStorageShow').click(function(){
		var localStore = window.localStorage;
		$('#txtName').val(localStore.addcontent_txtName);
		$('#txtLastName').val(localStore.addcontent_txtLastName);
		$('#txtContent').val(localStore.addcontent_txtContent);
	});
	$("#form1").keyup(function() 
	{
		if (window.localStorage) 
		{		
			var localStore = window.localStorage;			
			localStore["addcontent"] = 'true';
			localStore["addcontent_txtName"] = $('#txtName').val();
			localStore["addcontent_txtLastName"] = $('#txtLastName').val();
			localStore["addcontent_txtContent"] = $('#txtContent').val();		
		}
		else 
		{
			alert('localStorage desteklenmiyor');
		}
	});
});
</script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">
<input type="text" name="textfield" id="txtName" />
<input type="text" name="textfield2" id="txtLastName" />
<a style="cursor:pointer;" id="linkStorageShow">Storage Getir</a>
<br />
<br />
    <textarea name="txtContent" cols="46" rows="10" id="txtContent"></textarea>
    <br />
    <br />
    <input type="submit" name="button" id="btnclear" value="temizle" />
</form>

</body>
</html>

Ekran Çıktısı:

localStorage özeliğini destekleyen tarayıcı sürümleri;

ve üzeri.