JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？

首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>关于Cookie</title>
<script>
/*
cookie:存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据；
1、不同的浏览器存放的cookie位置不一样，也是不能通用的；
2、cookie的存储是以域名的方式进行区分的；
3、cookie的数据是可以设置名字的，j.name=Jack
4、一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样；
5、每个cookie存放的内容大小也是限制的，不同的浏览器存放大小限制不一样；

我们通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串的形式的值，它包含了
当前网站下的所有cookie，它会把所有cookie通过一个分号+空格的形式串联起来。

我们想长时间存放一个cookie，需要在设置这个cookie的时候必须设置一个过期时间；
document.cookie='名称=值;expires='+(字符串格式的)时间;
cookie默认是临时存储，当浏览器关闭进程的时候，自动销毁；

*/

//document.cookie='名字=值';
//document.cookie='name=Jack';
//document.cookie='pwd=123456';

//设置一个过期时间
//var oDate=new Date();
//oDate.setDate(oDate.getDate()+7);//设置为当前时间起算7天后过期
//document.cookie='name=Jack;expires='+oDate.toGMTString();
//alert(typeof oDate);//odate类型是object类型，需要转换为字符串；
//alert(oDate.getDate()); //获取的是当前月份的日号，如5月25，输出的是25

//读取cookie:document.cookie;
//alert(document.cookie);//name=Jack; pwd=123456

//内容最好编码存放，编码--encodeURI(),解码--decodeURI()
//document.cookie='name='+encodeURI('Jack\n您好')+';expires='+oDate.toGMTString();//name=Jack%0A%E6%82%A8%E5%A5%BD; pwd=123456
//alert(decodeURI(document.cookie));//name=Jack 您好; pwd=123456
setCookie("name","Tom",5);
alert( getCookie("name"));
removeCookie("name");
/*
封装
*/

function setCookie(key,value,t)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+"="+value+"; expires="+oDate.toDateString();

}
function getCookie(key){
var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的，所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型；
for(var i=0;i<arr1.length;i++){
var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
if(arr2[0]==key){
return decodeURI(arr2[1]);
}
}

}
//封装一个移除cookie的函数
function removeCookie(key){
setCookie(key,"",-1);//把cookie设置为过期

}
</script>
</head>

<body>
</body>
</html>

例子：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>记住cookie效果</title>
<script>
/*
封装*/
window.onload=function(){

var oName=document.getElementById("username");
var oBtn=document.getElementById("btn");
var oDel=document.getElementById("del");

//判断当前cookie是否有值，---即判断getCookie()函数的返回值是否有
if(getCookie("Username")){
oName.value=getCookie("Username");
}else{
oName.value="请输入账户名";
}

oBtn.onclick=function(){
alert("登录成功");
setCookie("Username",oName.value,5);
}

oDel.onclick=function(){
removeCookie("Username");
oName.value="";
}
}

function setCookie(key,value,t)
{ if(t>0){
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+"="+value+"; expires="+oDate.toDateString();
}
}

function getCookie(key){
var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的，所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型；
for(var i=0;i<arr1.length;i++){
var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
if(arr2[0]==key){
return decodeURI(arr2[1]);
}
}
}

//封装一个移除cookie的函数
function removeCookie(key){
setCookie(key,"",-1);//把cookie设置为过期

}


// removeCookie("name");

</script>
</head>

<body>
<input type="text" id="username">
<input type="button" value="登录" id="btn">
<input type="button" value="清除cookie" id="del">
</body>
</html>

JS 浏览器cookie的设置，读取，删除的更多相关文章

  1. JS读写Cookie（设置、读取、删除）

    JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...

  2. js操作cookie(创建、读取、删除)方法总结

    js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写: 此文主要介绍两个常用的插件: Js.cookie.js 和 jQuery.cookie.js 0.Js.cooki ...

  3. js中cookie的添加，删除，查询总结

    function addCookie(objName,objValue,objHours){//添加cookie var str = objName + "=" + escape( ...

  4. js 处理 cookie的存储与删除

    <script> //JS操作cookies方法! //写cookies function setCookie(c_name, value, expiredays){ var exdate ...

  5. uni-app同步缓存值 设置 读取 删除

    A页面 <view class="go-to-tab" @tap="gotologin"> 去login页面 </view> msg : ...

  6. JS对浏览器Cookie的操作，查询、设置以及删除

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...

  7. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  8. JS读写浏览器cookie及读取页面参数

    JS读写浏览器cookie及读取页面参数 var zbrowser = { //设置浏览器cookie,exdays是cookie有效时间 setCookie: function (c_name, v ...

  9. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

随机推荐

  1. matlab函数：residue和residuez的用法

    一.residue函数 1. 概念:在部分分式展开式和多项式系数之间转换.(Convert between partial fraction expansion and polynomialcoeff ...

  2. Intellij IDEA2016 注册码

    网上大多数关于Intellij IDEA2016的注册码多是同一个,如下 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1l ...

  3. SVG格式转Visio的vsd格式方法，附带C#动态调用Office的Com组件方法

    SVG格式可以直接显示在网页上面,用来实现诸如统计Chart图表.流程图.组织结构图的功能.为了使图像可以下载下来以便于修改,可以将SVG转为Visio的vsd格式.方法很简单,主要是使用Visio组 ...

  4. JVM知识在离线数据中的运用

    又是飞花的季节了.多愁善感的林妹妹看到柳絮说:“嫁与东风春不管,凭尔去,忍淹留.”宝姐姐看了却来一句:“好风凭借力送我上青云”. 特别羡慕情商高的人,经常在想他们是怎么做到的.从来看不出他们不喜欢谁, ...

  5. MySQL之数据类型（常用）

    MySQL-data_type数据类型 1.查看数据类型 mysql> help data type    //通过help对数据进行查看,以及使用的方法 2.MySQL常见的数据类型 整数in ...

  6. java多线程基本概述（三）——同步方法

    非线程安全其实是在多个线程对同一个对象实例的变量进行并发访问的时候发生,产生的后果就是脏读,也就是取到的数据是修改过的.而线程安全就是获得的实例变量的值是经过同步处理的,从而不会出现脏读现象. 1.1 ...

  7. 利用jackson-databind，复杂对象对象和json数据互转

    如果简单对象,那么转换的方式比较多,这里指的复杂对象,是指对象里面存在cycle引用,比如: /** * @author ding * */@Entity@Table(name = "ser ...

  8. Java--向数据库添加txt文件中的批量数据

    大家可能会遇到这样的问题,在做一个项目时需要操作数据库,需要有大量的数据需要导入到数据库中,这部分数据存到了txt文档中(可以把Word文档中的数据弄到txt文档),总不能每一条数据都复制黏贴到数据库 ...

  9. 这可能是php世界中最好的日志库——monolog

    由于一些历史原因,php中并没有内建的日志接口,故长期以来也没一个功能完备并且应用广泛的日志库.在我的工作生涯中,如果系统需要记录一些应用日志的话,基本上就是封装一个日志类,然后把一些要记录的字段写入 ...

  10. 博弈论(Game Theory) - 03 - 前传之最大最小均衡

    博弈论(Game Theory) - 03 - 前传之最大最小均衡 开始 最大最小均衡是由人冯·诺依曼和摩根斯坦提出.冯·诺依曼和摩根斯坦也被认为是博弈论的创始人. 冯·诺依曼提出的"最大最 ...