How to use native JS and jquery to store cookies in <<< Web pages

Source: Internet
Author: User

The cookie mechanism in JavaScript enables the application to meet the requirements of real global variables, a mechanism provided by the browser that provides the cookie attributes of the document object to JavaScript. It can be controlled by JavaScript, not the nature of JavaScript itself, because the cookie mechanism is to store the information on the hard disk, so he can use it as a global variable.

Cookie about security and scope

1. Cookies may be disabled. When the user is very concerned about personal privacy protection, he is likely to disable the browser's cookie function;
2. Cookies are browser-related. This means that even if the same page is accessed, the cookies stored between browsers are not accessible to each other;
3. Cookies may be deleted. Because each cookie is a file on the hard disk, it is likely to be deleted by the user;
4, cookie security is not high. All cookies are recorded in a file in plain text, so if you want to save information such as a user name password, it is best to go through the encryption process beforehand.

JS Settings Cookie

In native JavaScript, store cookies that use key-value pairs to set cookies, such as:

?
1 document.cookie="userName=admin";

If you want to store multiple values, use the ";" Number with a space, for example

?
1 document.cookie="userName=admin; password=admin";

Store cookies and set expiration time

?
1 2 3 4 5 6 7 8 9 10 //这里的过期时间是以GMT时间格式表示的时间字符串 //此句代码的一是为,将userName的过期时间设置为expiress定义好的时间,一旦超过这个时间cookie将失效 document.cookie="userName=admin; expiress=过期时间";//创建一个cookie,设置一个过期时间 <script language="JavaScript" type="text/javascript">     var date=new Date();  //获取当前时间     date.setTime(date.getTime()+1*24*3600*1000);//将date设置为1天以后的时间     document.cookie="userName=admin; expires="+date.toGMTString(); //将userName设置为1天后过期 </script>

Delete Cookies  

?
1 2 3 4 5 6 7 8 9 10 11 //将cookie设置为过去的时间可达到删除cookie的效果 <script language="JavaScript" type="text/javascript">      //获取当前时间     var date=new Date();     //将date设置为过去的时间     date.setTime(date.getTime()-10000);     //将userName这个cookie删除     document.cookie="userName=admin; expires="+date.toGMTString(); </script>

Take value  

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script language="JavaScript" type="text/javascript">     //设置两个cookie     document.cookie="userName=admin; password=admin";     //获取cookie字符串     var strCookie=document.cookie;     //将多cookie切割为多个名/值对     var arrCookie=strCookie.split("; ");     var userName;     //遍历cookie数组,处理每个cookie对     for(var i=0;i<arrCookie.length;i++){         var arr=arrCookie[i].split("=");         //找到名称为userName的cookie,并返回它的值         if("userName"==arr[0]){             userName=arr[1];             break;         }     }     alert(userName); </script>       

Specify the path to an accessible cookie 

By default, if a cookie is created on a page, the cookie is also accessible to other pages in the same directory as the page. If there are subdirectories under this directory, they can also be accessed in subdirectories. For example, cookies created in www.xx.com/html/a.html can be accessed by www.xx.com/html/b.html or www.xx.com/html/some/c.html, but not by www.xxxx.com/d.html.

To control which directories the cookie can access, you need to use the path parameter to set the cookie with the following syntax:

Document.cookie= "Name=value; Path=cookiedir ";
Where Cookiedir represents the directory in which cookies can be accessed. For example:

Document.cookie= "Name=value; Path=/admin ";

Indicates that the current cookie can only be used in the admin directory.

If you want to make a cookie available under the entire Web site, you can specify Cookie_dir as the root directory, for example:

Document.cookie= "Name=value; path=/";

jquery Settings Cookie

jquery is easy to use because it encapsulates a lot of things, so you need to import two JS files when using jquery for cookie operation.

?
1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> <script type="text/javascript" src="../js/jquery.cookie.js"></script> $.cookie(‘name‘,‘value‘);//设置cookie的值,把name值设为value$.cookie(‘the_cookie‘, ‘the_value‘, {expires: 7, path: ‘/‘, domain: ‘baidu.com‘, secure: true});//新建一个cookie 包括有效期 路径 域名等   //expires  设置过期时间,上面为7天   //domain   设置生效域名,上面为baidu.com   //secure   是否启用加密,默认为false,此处设置了true $.cookie(‘name‘, null);//删除一个值$.cookie(‘name‘);//取出name的值

  

Detailed description of cookies:http://www.jb51.net/article/14566.htm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.