视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
浏览器存储技术cookie、session的实例介绍
2020-11-27 20:18:22 责编:小采
文档

HTTP无状态协议是指协议对于事务处理没有记忆能力。
会话跟踪
协议的状态是指下一次传输可以“记住”这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话)
的连续两个请求互相不了解,当浏览器发送请求给服务器的时候,服务器响应,但是同一个浏览器再发送请求给
服务器的时候,他会响应,但是他不知道你就是刚才那个浏览器,每一次请求和响应都是相对独立的。

Cookies最典型的应用是判定注册用户是否已经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化
登录手续,这些都是Cookies的功用。另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面
中选择不同的商品,这些信息都会写入Cookies,以便在最后付款时提取信息。

Javascript使用cookie
假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,
同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,
这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读
取cookie呢?
首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔


在H5中webStorage其实就是在web上存储数据,分为两种:
sessionStorage 在浏览器关闭时存储的数据将消失---临时存储
localStorage 可以一直存在 --- 永久存储

设置
session storage:
sessionStorage.setItem("smessage",dataDom.value);

获取
sessionStorage.getItem("smessage")

removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key"); localStorage.removeItem("site");


clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear(); localStorage.clear();

1、cookie一般不大于4095kb;设置过多访问很慢;
2、客户端与服务器都能访问数据
3、有有限期

local storage:只有本地浏览器能访问,每个域大小5M
没有过期时间;即存即取;


cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。
document.cookie="name="+username;
var username=document.cookie.split(";")[0].split("=")[1];


//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie 函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例:
//s20是代表20秒
//h是指小时,如12小时则是:h12
//d是天数,30天则:d30
setCookie("name","hayden","s20");


封装函数
//获取
function getCookie(c_name){
if (document.cookie.length>0) {
var c_start=document.cookie.indexOf(c_name + "=")
//console.log(c_start);
if(c_start!=-1){
c_start=c_start + c_name.length+1
}else{
return;
}
//username
// console.log(c_start);
c_end=document.cookie.indexOf(";",c_start)
console.log(c_end);
if (c_end==-1) {
c_end=document.cookie.length;
}
return document.cookie.substring(c_start,c_end);
}else{
return ""
}

}
//设置
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +value+";"+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//检查
function checkCookie(){
var username=getCookie('username')
console.log(username);
if (username!=null && username!=""){
alert('Welcome again '+username+'!');
//setCookie("username",username,-1);
}else{
username=prompt('Please enter your name:',"")
if (username!=null && username!=""){
setCookie('username',username,365)
}
}
}
onload=checkCookie();

下载本文
显示全文
专题