zoukankan      html  css  js  c++  java
  • js保存,获取,删除cookie的操作

    JSP表单页面

    <form action="login" method="post">
    				用户名:<input type="text" name="username" id="username" /><br>
    				密码:<input type="password" name="password" /><br />
    				<input type="checkbox" id="remember" checked="checked">
    				记住用户名<input type="submit" value="登录" id="sub" />
    			</form>


    JS操作cookie

    <script type="text/javascript">
    	$(document).ready(function() {
    		    var name = getCookie("username");
    		    //$("#username")[0].value=name; 
    			$("#username").val(name);
    
    			/*
    			* 当点击登录按钮时 判断是否勾选记住用户名 
    			* 如果勾选  则将用户名保存在Cookie中 否则删除 
    			*/
    			$("#sub").click(function() {
    				if ($("#remember").attr("checked") == true) {
    					//获得用户名 
    					var username = $("#username").val();
    					//设置cookie
    					setCookie("username", username);
    				} else {
    					//删除cookie
    					delCookie("username") 
    				}
    			})
    			function setCookie(name, value) {
    				var Days = 60; //cookie 将被保存两个月 
    				var exp = new Date(); //获得当前时间 
    				exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); //换成毫秒
    				document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    			}
    			function getCookie(name) {
    			    //取出cookie 
    				var strCookie = document.cookie;
    				//cookie的保存格式是 分号加空格 "; "
    				var arrCookie = strCookie.split("; ");
    				for ( var i = 0; i < arrCookie.length; i++) {
    					var arr = arrCookie[i].split("=");
    					if (arr[0] == "username") {
    						return arr[1];
    					}
    				}
    				return "";
    			}
    			function delCookie(name) {
    				var exp = new Date(); //当前时间 
    				exp.setTime(exp.getTime() - 1); //删除cookie 只需将cookie设置为过去的时间  
    				var cval = getCookie(name);
    				if (cval != null)
    					document.cookie = name + "=" + cval + ";expires="+ exp.toGMTString();
    			}
    		})
    </script>


    cookie简单介绍

    cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给javascript。可以由javascript对起进行控制

    而并不是javascript本身的性质。cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次

    访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

    cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点。它可以用于以下几种场合。

    (1) 保存用户登录状态

    (2) 跟踪用户行为

    (3) 定制页面

    (4) 创建购物车

    设置cookie

     每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie

    document.cookie="username=zhangsan";

    如果要一次存储多个名/值对,可以使用分号加空格(;  )隔开,例如:

    document.cookie="username=zhangsan;  password=123";

    在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方 法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此 种方案还可以避免中文乱码的出现。

    给cookie设置终止日期

    到现在为止,所以的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失。

    在实际开发中,cookie常常需要长期保持,例如保存用户登录的状态,可以用下面的选项来实现:

    document.cookie="username=zhangsan; expiress=GMT_String";

    其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将username这个cookie设置为GMT_String

    表示的过期时间,超过这个时间,cookie将消失,不可访问

  • 相关阅读:
    过度效果
    JQ 滚动图片
    清除Css中select的下拉箭头样式
    利用原生 js 模拟出 JSON.parse 和 JSON.stringify
    利用 qrcode 在图片生成二维码
    JavaScript--正则表达式
    2、less的用法
    模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)
    模拟 ES6 SET 数组去重
    前端方式导入导出xlsx
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131525.html
Copyright © 2011-2022 走看看