Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve javascript cookie operation, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Methods: 1, use "[xss_clean] =" name = value; "" statement to set cookie or modify cookie value; 2, use "[xss_clean]" statement to obtain cookie value; 3, delete cookie by setting valid time "expires" to expiration value.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Cookie is a variable stored in a visitor's computer, and when a user visits a website, data can be stored on the visitor's computer through cookie. Then, when the user requests the page again through a browser on the same computer, the cookie is sent, so cookie can be used to identify the user.

1. Set up cookie

Using cookie to store data is achieved by setting up cookie. Each cookie is a name / value pair, which is concatenated with an equal sign and assigned to [xss_clean]. You can assign multiple name / value pairs to [xss_clean] at a time, and separate each name / value pair with a semicolon and a space.

The basic format for setting cookie is as follows:

[xss_clean] = "name 1 = value 1 [; name 2 = value 2; …]"

An example of setting up cookie is as follows:

[xss_clean] = "username=abc"; [xss_clean] = "age=23"; [xss_clean] = "username=abc; age=23"

It is important to note that symbols such as semicolons and equal signs = cannot be used in the name or value of cookie. If you want to store these symbols, you need to use the escape () function to encode. For example: [xss_clean] = "str=" + escape ("username=nch"), the code is equivalent to: [xss_clean] = "str=username%3Dnch", that is, the equal sign is encoded as% 3D. When you use escape () encoding, you need to use unescape () to decode the original cookie value after the value is taken out.

In addition, when the values in the cookie set by the above format are stored in the user's computer, the data of different websites are distinguished in the form of a website domain name, and different browsers store cookie in different locations, so the stored cookie between different browsers cannot access each other. In addition, there is a limit on the number of cookie stored in the same domain name, and different browsers have different limits on the number of storage. Moreover, there is a limit to the size of the content stored in each cookie, and the size limit varies from browser to browser.

two。 Modify cookie value

If you want to change a cookie value, simply reassign it, for example: [xss_clean] = "age=36"; so you can change the cookie value of the previously set age=23.

3. Get cookie

When you get the cookie under the current site through [xss_clean], you get a value in the form of a string, which contains all the cookie under the current site. It concatenates all cookie in the form of a semicolon plus a space.

To get different cookie values, you can convert this string containing semicolons and spaces into an array of strings separated by semicolons using the split () method, and then traverse the string array to get each name / value pair. For this name / value pair, use the split () method to convert it into an array containing names and values separated by an equal sign, and you can get the value of the specified cookie name.

For example, the code to get the value of cookie named age is as follows:

[xss_clean] = "username=abc; age=23"; var arr1 = [xss_clean] .split (';'); for (var I = 0; I

< arr1.length; i++){ var arr2 = arr1[i].split('='); if(arr2[0] == 'age'){ alert(arr2[1]); }} 4. 设置cookie的有效时间 默认情况下，cookie 是临时存储的，即默认是存在内存的，并没有存储到硬盘中，所以存储的 cookie 在浏览器进程关闭后会自动销毁。如果想把 cookie 在计算机中保存一段时间或永久保存，则需要在设置 cookie 时对其设置一个有效时间，设置格式如下： [xss_clean] = "名称=值;expires="+字符串格式的时间; 例如： var oDate = new Date();oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期//设置cookie的有效时间，时间为字符串格式[xss_clean] = 'username=abc;expires='+oDate.toGMTString(); 5. 删除cookie 直接将 cookie 的有效时间设置成过去某个时间即可。例如： var oDate = new Date();oDate.setDate(oDate.getDate()-1);//访问页面的前一天[xss_clean] = 'username=abc;expires='+oDate.toGMTString(); 【例 1】使用 document 操作 cookie。 使用cookie记住登录用户名 _window.onload = function(){ var oUsername = document.getElementById('username'); var oLogin = document.getElementById('login'); var oDel = document.getElementById('del'); //判断用户是否曾经登录过 if(getCookie('username')){ oUsername.value = getCookie('username'); } //定义一个函数来获取指定名称的cookie值： function getCookie(key){ var arr1 = [xss_clean].split(';'); for(var i = 0; i < arr1.length; i++){ var arr2 = arr1[i].split('='); if(arr2[0] == key){ return unescape(arr2[1]);//对编码后的内容进行解码 } } } //定义一个函数来设置cookie,同时设置cookie的有效时间 function setCookie(key,value,t){ var oDate = new Date(); oDate.setDate(oDate.getDate()+t); //使用escape()对内容进行编码 [xss_clean] = key+'='+escape(value)+';expires='+oDate.toGMTString(); } //定义一个函数移除cookie function removeCookie(key){ setCookie(key,'',-1); } oLogin.onclick = function(){ alert('登录成功'); //将输入的用户名存储在cookie中，且在登录5天后cookie过期 setCookie('username',oUsername.value,5); } oDel.onclick = function(){ removeCookie('username'); oUsername.value = '';//移除cookie后清空文本框内容 } }; 注：Firefox 和 IE 在本地只允许临时操作 cookie，关闭浏览器后无法获取 cookie。而 Chrome 则不允许在本地操作 cookie。将例 1 发布到 Web 服务器上后再访问它时，这些浏览器都可以操作 cookie。 下图所示是在 Chrome 浏览器中访问发布到 Tomcat Web 服务器上运行后分别为输入用户名后单击登录按钮和删除按钮的结果（Tomcat 服务器在本机，因而可以使用 localhost 作为域名来访问它）。

Enter the user name and click the login button, close the Chrome browser process before clicking the delete user name cookie button, and then open Chrome access example 1 again to get the result shown in figure 3, that is, the user name is automatically displayed in the text box. If you click the delete username cookie button to close the Chrome browser process, and then open Chrome access example 1 again, you get the result shown in figure 4, where the user name stored in cookie has been deleted and cannot be displayed in the text box.

The above is all the content of this article "how to implement cookie Operation in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.