今天把javascript如何用来创建及存储cookie复习了一下,其中的一点体会拿出来和大家讨论,首先看一下基础知识:
什么是cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
有关cookie的例子
- 名字 cookie: 当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
- 密码 cookie: 当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。
- 日期 cookie: 当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。
下面来创建一个cookie的实例,如何来创建cookie及取出cookie。
javascript部分代码:
02 |
function setCookie(name, value, expireday) { |
04 |
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限 |
05 |
document.cookie = name+ "=" +escape(value)+ "; expires" + "=" +exp.toGMTString(); //创建cookie |
08 |
function getCookie(name) { |
09 |
var cookieStr = document.cookie; |
10 |
if (cookieStr.length > 0) { |
11 |
var cookieArr = cookieStr.split( ";" ); //将cookie信息转换成数组 |
12 |
for ( var i=0; i<cookieArr.length; i++) { |
13 |
var cookieVal = cookieArr[i].split( "=" ); //将每一组cookie(cookie名和值)也转换成数组 |
14 |
if (cookieVal[0] == name) { |
15 |
return unescape(cookieVal[1]); //返回需要提取的cookie值 |
21 |
function checkCookie() { |
22 |
var cookieUser = document.getElementById( "cookieUser" ); |
23 |
var userName = getCookie( "userName" ); |
25 |
cookieUser.innerHTML = "您好" +userName+ ",欢迎再次回来!" ; |
27 |
var value = prompt( "请输入用户名" , "" ); |
29 |
setCookie( 'userName' , value, 1); |
主要在于如何提取我们需要的cookie信息,在本例的getCookie函数中主要是将cookie信息转化成数组的方式来查找我们需要提取的cookie值。还可以通过正则表达式的方式来匹配,如下:
1 |
function getCookie(name) { |
2 |
var cookieStr = document.cookie; |
3 |
var cookieArr = cookieStr.match( new RegExp(name+ "=[a-zA-Z0-9]*;$" )); |
4 |
var cookieVal = cookieArr.split( "=" ); |
5 |
if (cookieVal[0] == name) { |
6 |
return unescape(cookieVal[1]); |
比如在这个例子中,如果打开浏览器中没有存储名为userName的cookie,则会提示用户输入用户名,再次刷新页面时则会显示输入的cookie值。 最后我们可以测试一下代码:
1 |
< body onload = "checkCookie()" > |
2 |
< p id = "cookieUser" ></ p > |
最新文章
- Debian系统vim中文显示乱码问题
- vim 树形目录插件NERDTree安装及简单用法
- android 中theme样式的解释
- zabbix监控windows主机网卡流量
- 光流算法:关于OpenCV读写middlebury网站给定的光流的代码
- AJAX之JSON
- (转载)WindowsXP上安装和运行神器SqlMap的步骤
- The Fortified Forest - POJ 1873(状态枚举+求凸包周长)
- 读书笔记之 - javascript 设计模式 - 单体模式
- CSS自学笔记(8):CSS拓展(一)
- Java基础学习笔记2-循环
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
- Session小解
- ASP.NET Core 实战:构建带有版本控制的 API 接口
- 在Fabric ChainCode中导入第三方包(以状态机为例)
- tableview 选中一行后,不显示选中颜色
- Linux:简单的并发服务器实现
- 锁定“嵌入式AI”应用 中科创达启动第二轮成长
- canvas - 简单的神经网络
- react native native module
热门文章
- python应用:主题分类(gensim lda)
- 素数环 南阳acm488(回溯法)
- uva 253 - Cube painting(相同骰子)
- Python: 列表的两种遍历方法
- 创龙TMS320C6748开发找不到 tl.dsp.evm6748的问题研究
- 常用js方法合集
- 使用Visual Studio 2017构建.Net Core的Docker镜像
- js数字格式化千分位格式
- C# 获取当前日期当年的周数
- Python简要标准库(3)