javascript基础篇——cookie

cookie,简单的理解。就是存储数据。通过cookie,数据可以长期保存,不随着浏览器的关闭而消失。

需要注意的是,同一台PC,不同浏览器之间,存放cookie的位置是不相同的,即使是在同一个浏览器中,因为cookie是以域名的形式存储,所以不同网站之间的cookie也是有区分的。当然,一个域名下存放cookie个数的多少、每个cookie所能存放内容的大小都是有限制的,不同的浏览器对此均有不同的设定。一条cookie语句只能添加一个cookie,即一个名值对,多条cookie需要多次添加。

cookie的使用:

cookie的使用一共分为三部分,添加cookie,获取cookie,删除cookie。

1.添加cookie:cookie默认临时存储,过期时间为当前时刻,在你关闭浏览器进程的时候就会自动消失,所以你需要在生成cookie的同时设置一个过期时间。

语法:document.cookie=’age=20; expires=datas’;

此语句添加了一条cookie,赋值语句的右边要确保为字符串形式。当第一个名值对中存在中文及特殊字符时,可能会显示异常,所以cookie的内容最好以编码的形式存放。通过编码与解码可以顺利存储和显示所有结果。expires设置过期时间。通过下面的例子可以更好的理解cookie的添加。

var set_time=new Date();

set_time.setDate(set_time.getDate()+d); //首先获取当前日期为本月的第几天,再设置过期时间

document.cookie=’username=’+encode(joe\n你好)+’;expires=‘+set_time.toGMTString(); //将date格式转换为字符串格式

2.获取cookie:所有的cookie都是通过一个分号+空格的形式串联起来的。通过document.cookie来获取当前网站下的cookie的时候,得到的是字符串形式的值,它包含了当前网站下的所有cookie。想要获取每条cookie的名字,首先需要对每条cookie进行处理。注意观察下面给出的具体应用中获取cookie的方法。

3.删除cookie:将cookie的过期时间设置为过去的时间,即可删除此条cookie。

下面给出一个具体应用:

html部分:

<body>

  <input type="text" id="username"/>
  <input type="button" value="登录" id="login"/>
  <input type="button" value="删除" id="del"/> 

</body>

js部分::

window.onload=function(){

  var Login=document.getElementById("login");

  var Del=document.getElementById("del");

  var oUsername=document.getElementById("username");

  if(getCookie(‘username‘)){

    oUsername.value=getCookie(‘username‘);

  }

  Login.onclick=function(){

    alert(‘登录成功‘);

    setCookie(‘username‘,oUsername.value,5);

  }

  Del.onclick=function(){

    removeCookie(‘username‘);

    oUsername.value=‘‘;          //良好用户体验,删除cookie,用户名置空,为可编辑状态

  }

}

//添加cookie

function setCookie(key, value, t){        //name=joe:key为name,joe为value,t为过期时间

  var clearDate=new Date();

  clearDate.setDate( clearDate.getDate() + t);

  document.cookie= key + ‘=‘ + value + ‘;expires=‘ + clearDate.toUTCString();  //时间对象转为字符串形式

}

//获取cookie

function getCookie(key){             //cookie形式:name=joe; age=20;...

  var arr1=document.cookie.split(‘; ‘);      //将cookie字符串以;分割为数组,[name=joe],[age=20],...

  for(var i=0; i<arr1.length; i++){        //对上面的数组成员进行遍历

    var arr2 = arr1[i].split(‘=‘);        //将上面数组的每个成员以=为间隔再次分割为数组arr2

    if(arr2[0] == key){            //此时的arr2中有2个成员,然后对arr2的第一个数组元素进行匹配

      return decodeURI(arr2[1]);       //当符合条件,则以解码形式返回arr2的第二个成员,即键值对的值;

    }

  }

}

//删除cookie

function removeCookie(key){

  setCookie(key, ‘‘ ,-1);             //时间设置为过去的时间,即可删除

}

时间: 2024-10-25 05:17:03

javascript基础篇——cookie的相关文章

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

史上最全、JavaScript基础篇

索宁 Hot summer nights mid July, when you and  I were forever wild. 首页 新随笔 联系 管理 随笔 - 12  文章 - 5  评论 - 19 史上最全.JavaScript基础篇 本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语

JavaScript基础篇总结

一. 数组 1. 终止循环 a. break 终止整个循环,即跳出循环体,执行之外的语句. b. continue 终止本次循环,直接进行下一次循环 2. 数组 定义: 在内存中开辟一片连续的区域来存储数据. 声明: var arr = []; var arr = new Array(); 长度: 不超过最大值都行,无固定长度.arr.length 索引: 数组的基地址 + 偏移量 存储类型: 数组元素可以使任意类型 赋值方式: arr[0] = 1; arr[name] = "tom"

前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind

在我的职业生涯中,很早就已经开始使用JavaScript进行项目开发了.但是一直都是把重心放在了后端开发方面,前端方面鲜有涉及.所以造成的一个现象就是:目前的前端知识水平,应付一般的项目已然是足够的,但是火候尚缺,没有深入的进行研究,以至于总是谈论起来就发现自己半瓶子哐当的水平.为了解决这种尴尬的局面,决心潜心研究一段时间JavaScript,以下知识为本人学习过程中的总结,虽然以本人水平可能招致贻笑大方之果,但是更盼抛砖引玉之实. 在JavaScript中,我们调用一个普通的方法,可以通过如下

一步步学习javascript基础篇(8):细说事件

终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能阅读了.有了事件,我们可以通过键盘或是鼠标和页面交互了,通过我们不同的操作页面给出不同的响应.好了,开始我们今天的分析吧. DOM0级事件处理方式 什么是DOM0级? 其实世上本来没有DOM0级,叫的人多了就有了DOM0级. 在1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,在此之前

一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

JavaScript基础篇(四)— — 函数

一.函数基础 ??1.返回值:如果某个函数没有显式的return返回值,默认它的返回值为undefined ??2.参数:内建变量arguments,能返回函数所接收的所有参数 ???? ??3.预定义(内建)函数 -- isNaN: ????a.检测parseInt / parseFloat调用是否成功. ???? ????b.NaN不存在等值的概念, 也就是说表达式NaN === NaN 返回的是false 二.函数的变量作用域 ??1.变量提升:函数域优先于全局域,所有局部a会覆盖掉所有与

JavaScript基础篇

本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语句 异常处理 函数 定义函数3种方式 函数参数(arguments) 作用域与作用链 闭包 面向对象(特性,构造模式,原型模式prototype) prototype 验证方法(isPrototypeOf.hasOwnProperty.in) 其