`

JavaScript对cookie的储存和读取

 
阅读更多

注:参考 《JavaScript权威指南》第十六章 脚本化cookie

 

实现功能:将用户名存入到cookie中,关闭浏览器后,再次访问页面,可以取出cookie中值,进行相关验证性操作。(本例是对cookie的学习记录,仔细阅读,可了解关于cookie的基本应用。)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cookie的存储和读取</title>
</head>
<body>
<h3><b>Cookie的存储和读取</b></h3>

<form name="cookieForm">
<table border="1">
	<tr>
		<td>用户名:</td>
		<td><input type="text"  name="userName" size="25"></td>
	</tr>
	<tr>
		<td>密码:</td><td><input  type="password" name="password" size="27"></td>
	</tr>
	<tr>
	<td>操作</td>
	<td>
		<input type="button" value="存储Cookie" onclick="savaCookie()">
		<input type="button" value="读取Cookie" onclick="readCookie()">
	</td>
	</tr>
</table>
</form>
</body>

<script type="text/javascript"><!--
	function savaCookie(){
			var userName = document.cookieForm.userName.value;	
			 //userName  用户名
			var password = document.cookieForm.password.value;			
			 //password  密码 
			var nextyear = new Date();
			nextyear.setFullYear(nextyear.getFullYear()+1);    	 	   
			 //nextyear  打印格式为      2011
			var lastModified = document.lastModified;            	
			//version 更改版本  	lastModified打印格式为    05/27/2011 17:00:24 
			var cookieString= "userName="+ escape(userName) 
			+ ";password=" + escape(password) + ";version=" 
			+ escape(lastModified) + ";expires=" + nextyear.toGMTString();
			document.cookie =cookieString;
			alert(cookieString);
			
		}

	function readCookie(){
			var allcookies=document.cookie;               		 
			//读cookie属性。返回文档所有的cookie。
			var posOfName = allcookies.indexOf("userName=");	 
			//查找名为"userName"的开始位置。
			if(posOfName!=-1){
					var startOfName = posOfName+"userName=".length;		 
					//cookie的值的开始
					var endOfName = allcookies.indexOf(";",startOfName); 
					//cookie的值的结尾
					if(endOfName == -1) endOfName = allcookies.length; 
					var nameValue = allcookies.substring(startOfName,endOfName);
					nameValue = unescape(nameValue);
					if(nameValue != "wuyechun"){
							alert("非法用户");
						}else{
							alert("合法用户");	
							}
					
				}
		}

</script>

</html>

 

 

效果图:

说明:

1、输入用户名"wuyechun",点击"存储cookie",点击"读取cookie"。弹出对话框“合法用户”;

2、关闭浏览器,重新打开,点击"读取cookie"。弹出对话框“合法用户”;

3、点击"存储cookie",是将用户名"wuyechun"存入了cookie中,即使关掉了浏览器,再次打开,通过“读取cookie”读取了用户名,进行了判断。

 

看看本机中的cookie文件:

 

 

 

分享到:
评论

相关推荐

    JavaScript实现cookie的写入、读取、删除功能

    你可以使用 JavaScript 来创建和取回 cookie 的值。” cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。  从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在客户端的计算机...

    JavaScript创建、读取和删除cookie

    Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息。 Cookie的出现是为了解决保存用户信息的问题。例如 当用户访问网页...

    浏览器中使用JS操作Cookie详解

    并且在Cookie详解这篇文章中,介绍了如何在服务器端和使用JavaScript创建Cookie,并设置属性。 ​我们知道,Cookie是存储在客户端的,并且现在前后端分离慢慢变得流行起来,因此如何在浏览器上可以使用方便快捷的...

    JavaScript操作Cookie详解

    你可以使用 JavaScript 来创建和取回 cookie 的值。” – w3school cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。 从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在...

    JavaScript中Cookie操作实例

    JavaScript Cookie  Cookie对象:  Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据)。  Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,...

    JavaScript Cookie

    JavaScript Cookie Cookie 用于存储 web 页面的用户信息。 什么是 Cookie? Cookie 是一些数据, 存储于你...Cookie 以名/值对形式存储,如下所示: username=John Doe 当浏览器从服务器上请求 web 页面时, 属于该页面

    JavaScript Cookie:一个简单,轻巧JavaScript API,用于处理浏览器cookie-开源

    一个简单,轻量级JavaScript API,用于处理Cookie,该cookie在所有浏览器中均可使用,并且可以接受任何字符。 它经过了严格的测试,没有依赖性,支持ES模块并支持AMD / CommonJS。 它符合RFC 6265,具有有用的Wiki,...

    JavaScript cookie原理及使用实例

    什么是cookie? cookie 是本地计算机的临时存储。 ... 特点: cookie需要在服务器环境下运行; cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数...读取和设置cookie [removed] = “u

    javascript封装 Cookie 应用接口

    由于Cookie是通过字符串来存储信息的,所以容易导致在执行赋值运算的时需要转换读取信息的数据类型。而且Cookie信息的字符串本身就令人讨厌,在经常使用Cookie信息的 Web 应用中格外的不方便。所以需要自行的封装一...

    JavaScript学习笔记之Cookie对象

    JavaScript Cookie  Cookie对象:  Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据)。  Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,...

    JS使用cookie保存用户登录信息操作示例

    主要介绍了JS使用cookie保存用户登录信息操作,结合具体实例形式分析了javascript使用cookie实现针对用户信息的存储与读取相关操作技巧,需要的朋友可以参考下

    JavaScript王者归来part.1 总数2

     15.7.1 userData的存储和读取   15.7.2 userData的安全性   15.8 userData的限制   15.9 userData与cookie的对比   15.10 userData示例--一个利用userData实现客户端保存表单数据的例子   15.11 总结  ...

    javascript设置和获取cookie的方法实例详解

    主要介绍了javascript设置和获取cookie的方法,结合实例形式较为详细的分析总结了JavaScript操作cookie简单实现数据存储与读取的相关技巧,需要的朋友可以参考下

    nano-cookie:适用于nano JavaScript框架的cookie插件

    的Cookie插件添加了2种方法,可轻松读取和写入Cookie。 安装 要添加Cookie插件,请将其包含在核心框架之后的文档的&lt;head&gt;中: &lt;!DOCTYPE html &gt; &lt; html &gt; &lt; head &gt; &lt; title &gt; My ...

    javascript cookie的简单应用

    在我平时开发网页的过程中,可能涉及到浏览器本地的存储,现在主流的浏览器存储方式有:cookie,直接读取xml,userData,H5 的LocalStorage等,Cookie存储数据有限,但对于数据量不大的时候操作还是比较方便的。...

    jquery-SuperCookie:一个简单的jQuery插件,用于读取,写入和删除Cookie中的JSON值

    一个简单的jQuery插件,用于读取,写入和删除存储在cookie中的JSON值。 快速用法: 创建-创建cookie 检查-检查存在 验证-验证cookie值是否为JSON check_index-验证JSON中是否存在索引 read_values-将cookie值...

    jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    每当一台计算机通过浏览器来访问某个页面时,那么就可以通过 JavaScript 来创建和读取 cookie。  ②、实际上 cookie 是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这...

    aws-cloudfront-sign-cookies:节点js模块为Cloudfront生成签名的Cookie

    原始域名: {your-s3-bucket} 限制存储桶访问:是授予对存储桶的读取权限:是,更新存储桶策略 创建CloudFront密钥对。 选项 expireTime (可选-默认:30s)-URL应该过期的时间。 接受的值是 new Date().

    使用JavaScript制作一个简单的计数器的方法

    使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息。JavaScript中通过[removed]属性访问Cookie,这个属性包括名字、失效...

Global site tag (gtag.js) - Google Analytics