JS 浏览器cookie的设置,读取,删除
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的设置,读取,删除的更多相关文章
- JS读写Cookie(设置、读取、删除)
JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...
- js操作cookie(创建、读取、删除)方法总结
js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写: 此文主要介绍两个常用的插件: Js.cookie.js 和 jQuery.cookie.js 0.Js.cooki ...
- js中cookie的添加,删除,查询总结
function addCookie(objName,objValue,objHours){//添加cookie var str = objName + "=" + escape( ...
- js 处理 cookie的存储与删除
<script> //JS操作cookies方法! //写cookies function setCookie(c_name, value, expiredays){ var exdate ...
- uni-app同步缓存值 设置 读取 删除
A页面 <view class="go-to-tab" @tap="gotologin"> 去login页面 </view> msg : ...
- JS对浏览器Cookie的操作,查询、设置以及删除
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...
- 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 ...
- JS读写浏览器cookie及读取页面参数
JS读写浏览器cookie及读取页面参数 var zbrowser = { //设置浏览器cookie,exdays是cookie有效时间 setCookie: function (c_name, v ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
随机推荐
- (iOS)私有API的使用(原创)
最近在做企业级程序,需要搞设备的udid等信息,但是ios7把udid私有化了,不公开使用.所以研究了一下ios的私有api. 调查了一下文章,发现这方面的文章不多,国内更是不全,高手们都懒得写基础教 ...
- TabBar自定义方式(一)
1.思路:创建一个继承UIView的TabBar类,并将需要的item添加到TabBar上面去,并用代理来处理相应的时间 [self.view bringSubviewToFront:self.one ...
- 跟着刚哥梳理java知识点——异常(十一)
异常:将程序执行中发生的不正常情况(当执行一个程序时,如果出现异常,那么异常之后的代码就不在执行.) java.lang.Throwable:异常的超类 1.Error:java虚拟机无法解决的严重问 ...
- 什么是javascript的回调函数?
回调函数(callback) 基本上每本书里都会提一提实际上我们几乎每天都在用回调函数,那么如果问你到底什么是回调函数呢? 1. 回调函数是作为参数传递给另一个函数 2. 函数运行到某种程度时,执行回 ...
- MySQL关于Duplicate entry '1' for key 'PRIMARY'错误
今天复习MySQL遇到Duplicate entry '1' for key 'PRIMARY'错误. 原因是主键值为'1'的数据已经存在,主键是唯一的,不可重复.
- git工具使用的简单介绍
百度百科 写道 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git的读音为/gɪt/. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大 ...
- 树状数组 && 线段树
树状数组 支持单点修改 #include <cstdio> using namespace std; int n, m; ], c[]; int lowbit(int x) { retur ...
- 光场相机重聚焦之三——Matlab光场工具包使用、重聚焦及多视角效果展示
这一小节说一下Matlab光场工具包的使用,展示重聚焦和多视角的效果. 从Lytro illum中导出的raw数据为.lfp格式的光场图像文件(约52M大小),该文件包含以下几部分:光场图像数据raw ...
- 【小瑕疵】表单中的button会自动提交?
在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...
- angular二级联动菜单
<!doctype html> <html lang="en" ng-app='App'> <head> <meta charset=&q ...