Read write and save cookie
Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained about the implementation or use Browser Cookies in jQuery. I will explain how we can store the values of Cookies, writing (saving) values in Cookies and also how to remove (delete) Cookies using jQuery. Firstly I will explain about Cookies that are small text files that websites store on a user's computer to remember information about their visit, enhancing browsing experience and personalization. A "cookie" can refer to two distinct things: a baked good or a small text file used by websites. As a baked good, a cookie is a sweet, often flat, baked treat with varying textures. As a digital element, a cookie is a small text file that websites store on a user's computer to remember information about their visit, like login details or preferences.
Code for HTML Page
On the HTML page there will be four Controls, one is text box with the id named text_cookies for to enter the input by the user and other controls are three Button with the id named btn_readcookies and btn_writecookies and btn_deletecookies. On the Buttons click I assigned a JavaScript function to the onclick event handler. The button will work for writing, reading and removing cookies. On the HTML page I will inherit jquery.min.js as well as jquery.cookie.min.js. In the jQuery file I assign ready event handler to the Buttons for writing, reading and removing cookies have been assigned with WriteCookie, ReadCookie and DeleteCookie jQuery click event handler respectively.
Name:<input type="text" id=" text_cookies" />
<br /><br />
<input id="btn_writecookies" type="button" value="Write Cookie" />
<input id="btn_readcookies" type="button" value="Read Cookie" />
<input id=" btn_deletecookies " type="button" value="Remove Cookie" />
Write Cookie
When user will click on the Write Cookie Button, the TextBox value is saved to browser Cookie using the $.cookie function. The $.cookie function accepts two parameters, first the Name (Key) of the Cookie and second the Value to be stored in the Cookie.
Read Cookie
When user will click on the Read Cookie Button, the TextBox value will be fetched or find to browser Cookie using the $.cookie function.When the Read Cookie Button is clicked, the value of the Cookie is fetched using the $.cookie function. In order to read the Cookie value, the $.cookie function is used with one parameter i.e. the Name (Key) of the Cookie. The value read from the Cookie is displayed on the screen using Javascript Alert Message Box.
Remove Cookie
When user will click on the Remove Cookie Button, the Cookie is removed using the $.removeCookie function.The $.removeCookie function accepts the Name (Key) of the Cookie in order to remove the Cookie.
Name:<input type="text" id=" text_cookies" />
<br /><br />
<input id="btn_writecookies" type="button" value="Write Cookie" />
<input id="btn_readcookies" type="button" value="Read Cookie" />
<input id=" btn_deletecookies " type="button" value="Remove Cookie" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_writecookies").click(function () {
$.cookie("name_cookies", $("#txt_cookies").val());
});
$("#btn_readcookies").click(function () {
alert($.cookie("name_cookies "));
});
$("#btn_deletecookies").click(function () {
$.removeCookie("name_cookies ")
});
});
</script>
Now here i am giving complete tested code for the HTML page. You can copy and paste the whole code on your HTML page. And enjoy the execution of the whole concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
Name:<input type="text" id="txt_cookies" />
<br /><br />
<input id="btn_Writecookies" type="button" value="Write Cookie" />
<input id="btn_readcookies" type="button" value="Read Cookie" />
<input id="btn_deletecookies" type="button" value="Remove Cookie" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_Writecookies").click(function () {
$.cookie("name_cookies", $("#txt_cookies").val());
});
$("#btn_readcookies").click(function () {
alert($.cookie("name_cookies"));
});
$("#btn_deletecookies").click(function () {
$.removeCookie("name_cookies")
});
});
</script>
</body>
</html>
Conclusion: In above code, I explained that how to store the values of Cookies, writing (saving) values in Cookies by using jQuery. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment