什么是cookie?js手动创建和存储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 中。当访问者再次访问网站时，他们就会收到欢迎词。

首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：


代码如下:

<span style="font-size:14px;">function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}</span>

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

之后，我们要创建另一个函数来检查是否已设置 cookie：


代码如下:

<span style="font-size:14px;">function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}</span>

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。

最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。


代码如下:

<span style="font-size:14px;">function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}</span>

这是所有的代码：


代码如下:

<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html></span>

赞 (0)

相关推荐

  • 用JavaScript计算在UTF-8下存储字符串占用字节数

    最近和JavaScript纠缠上了. 遇到这么一个问题,数据库的字符集为UTF-8的,要在页面上使用JavaScript验证输入的文本用UTF-8存储时占用字节长度.JavaScript的String对象有length属性,但是这个计算的是字符数,不是字节数(问题总是翻来覆去的,记得当年玩Delphi的时候,还得写程序计算字符串的字符数,因为Delphi中String的length是字节数...).偷懒一点的办法是将验证代码中最大长度设置为数据库中对应字段的长度的1/3,但是这样准确来说有点不合

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

  • JavaScript实现基于Cookie的存储类实例

    本文实例讲述了JavaScript实现基于Cookie的存储类.分享给大家供大家参考.具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! /* * CookieStorage.js * 本类实现像localStorage和sessionStorage一样的存储API * 不同的是,它是基于HTTP Cookies实现的. */ function CookieStorage(maxage, path) { // 两个参数分别代表储存有效期和作用域 // 获

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • javascript Ext JS 状态默认存储时间

    复制代码 代码如下: Ext.state.CookieProvider = function(config){ Ext.state.CookieProvider.superclass.constructor.call(this); this.path = "/"; this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days this.domain = null; this.secure = fals

  • javascript js cookie的存储,获取和删除

    使用方法: //1.存储Cookie //2.参数说明: 1.参数1:Cookie存储Name,参数2:Cookie要存储的值 //3.例子如下: setCookie('Method',match); //1.获取Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: getCookie('Method') //1.删除Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: deleteCookie('Method');

  • ExtJS与PHP、MySQL实现存储的方法

    ExtJS与PHP、MySQL实现存储的方法

    1 建立数据库.注册表 复制代码 代码如下: create database db_register; create table db_register.tb_register( reg_loginid varchar(20) primary key, reg_name varchar(20) not null, reg_id int not null, reg_password varchar(20) not null, reg_sex varchar(2), reg_address varc

  • jsp使用cookie存储中文示例分享

    看J2EE的时候,看见书上讲到使用cookie保存信息的时,看到书上举得例子都是英文的键值对,我就想中文是不是一样呢?试了一下果然不一样.废话不多说,直接上代码: 比如说有addCookie.jsp代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>增加cookie</title></head><body><

  • JavaScript笔记之数据属性和存储器属性

    在javascript中,对象的属性分为数据属性和存储器属性两种: 两种属性的区别 我们使用Object.defineProperty()先来直观的感受一下这两者的不同. 使用Object.defineProperty()对数据属性进行设置的方法如下 var obj = {}; Object.defineProperty(obj, "prop", { value: 1, writable: true, //可写性 enumerable: true, //可枚举性 configurabl

  • 浏览器中url存储的JavaScript实现

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码.来看看它是如何工作的. var stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awesome/url"; history.pushState(stateOb

  • JSON复杂数据处理之Json树形结构数据转Java对象并存储到数据库的实现

    在网站开发中经常遇到级联数据的展示,比如选择城市的时候弹出的省市县选择界面.很多前端制作人员习惯于从JSON中而不是从数据库中获取省市县数据.那么在选择了省市县中的某一个城市 ,存储到数据库中需要存储所选城市的代码.所以需要一个能将JSON数据(一般存储在javascript脚本中)结构全部导入到数据库中的功能. JSON的特点是支持层级结构.支持数组表示的对象 .下面的示例介绍如何将JSON的省市县数据保存到数据库中,实现原理非常简单,就是利用JSON的java工具包API,将层次结构的JSO

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • Node.js中调用mysql存储过程示例

    Node.js中调用mysql存储过程示例

    例子仅在windows下测试通过,没有放在linux下测试.如有问题,可以电邮给我~ 1.安装node.js.mysql,此处略(自行搜索吧)-: 2.创建一个名为test的数据库,然后建一张名为user_info的表(仅供测试)- 这里假定mysql使用的用户名为root,密码为123456 相应的mysql如下: 复制代码 代码如下: /** * 创建名为test的数据库 */ DROP DATABASE IF EXISTS test; CREATE DATABASE test; USE t

随机推荐