JavaScript Çerezləri

A qoğal server / veb saytının istifadəçinin kompüterinə göndərdiyi və brauzerdə saxlanılan kiçik bir sənəddir. Müasir veb saytlar müştərini və əlaqəli məlumatları xatırlamaq üçün çərəzlərdən çox istifadə edirlər. Səhifə yükləndikdə, servvr saxlanılan çərəzləri yoxlayır. Bu, bir çox veb saytında təkrar-təkrar giriş etməməyinizin səbəbidir.

Cookie yaradılması

Çərəzlər əsas dəyər cütləri kimi istifadə olunur, hər düymə onlara verilən bir dəyəri tutur. Javascript ilə document.cookie mülkiyyəti ilə çərəzlər yarada, oxuya, yaza və silə bilərsən.

document.cookie = "name=some name";

Yarım nöqtəli bir çörəkdə birdən çox dəyər saxlanıla bilər, son istifadə müddəti də əlavə edilə bilər.
document.cookie = "fname = first;lname = last;expires = Wed, 20 Sept 2017 10:00:00 UTC"

Çərəz silinir

Cookies müddəti bitdikdə avtomatik olaraq silinir. Ancaq bir çərəzin üstünə yazaraq onu bilərəkdən silə bilərsiniz. Silmək istədiyiniz hər bir əsas dəyər cütü üçün dəyərləri boş qoyun.

document.cookie = "fname = ;lname = ;expires = Thu, 01 Jan 1970 00:00:00 UTC"

Çərəz nümunəsi

İndi məlumatları saxlamaq və yoxlamaq üçün çərəzlərdən istifadə edən kiçik bir tətbiq sınayacağıq.

HTML hazırlanır

<input type="text" class="form-control" id='data'>
<button class="btn center-block btn-primary" id='submit'>Go</button>

Javascript

Eventlistener düyməsinə əlavə edilməsi və giriş qutusundan dəyəri alınması.

document.getElementById('submit').addEventListener("click", function(){
    var name = document.getElementById("data").value;
    setCookie(name);
});

Çərəzin qurulması

function setCookie(name) {
    document.cookie = "name =" + name;
};

Çərəz əldə edin

Aşağıda göstərildiyi kimi document.cookie istifadə edərək çərəz dəyərlərini əldə edə bilərsiniz

window.onload = function(event){ 
	var name = "name =";
	var decodedCookie = decodeURIComponent(document.cookie);
	data = decodedCookie.split('=')[1]
	if(data!='undefined')
		document.write(data);
}

Cookie üçün tam kod

Aşağıda HTML və JavaScript istifadə edərək çərəzdən necə istifadə ediləcəyi barədə tam kod verilmişdir

<html>
	<head>
		<meta charset='utf-8'>
		<title>Cookies</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<style>
			.well{
				font-weight: bold
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
				<h2>Cookies App</h2>
				<input type="text" class="form-control" id='data'>
				<br>
				<button class="btn center-block btn-primary" id='submit'>Go</button>
				</div>
			</div>
		</div>


		<script>	
			window.onload = function(event){ 
				var name = "name =";
			    var decodedCookie = decodeURIComponent(document.cookie);
			    data = decodedCookie.split('=')[1]
				if(data!='undefined')
					document.write(data);
			}

			function setCookie(name) {
			    document.cookie = "name =" + name;
			};

			document.getElementById('submit').addEventListener("click", function(){
			    var name = document.getElementById("data").value;
			    setCookie(name);
			}); 
		</script>
	</body>
</html>

Şərh yaz

Translate »