Examples of browser storage technologies cookie and session

HTTP stateless protocol means that the protocol has no memory ability for transaction processing.
Session tracking
The status of the protocol refers to the ability of the next transmission to "remember" the transmission information. Stateless refers to two consecutive sessions of the same session (note what the same session is)
The requests do not understand each other. When the browser sends a request to the server, the server responds, but when the same browser sends a request to the
server again, it will respond, but it does not know that you are the browser just now. Every time A request and response are relatively independent.

The most typical application of Cookies is to determine whether a registered user has logged in to the website. The user may be prompted whether to retain user information the next time he enters this website to simplify the
login procedure. These are the functions of Cookies . Another important application is "shopping cart" processing. Users may choose different products on different pages of the same website within a period of time, and this information will be written to Cookies so that the information can be extracted during the final payment.

Javascript uses cookies

Suppose there is such a situation. In a certain use case process, jump from page A to page B. If JS is used in page A to save the value of a certain variable with the variable temp Value, when on page B,
also needs to use JS to reference the variable value of temp. The life cycle of global variables or static variables in JS is limited. When a page jump occurs or the page is closed,
The values ​​of these variables will be reloaded, that is, the saving effect will not be achieved. The best solution to this problem is to use cookies to save the value of the variable. So how to set and read the cookie?
First of all, you need to understand the structure of cookies a little bit. Simply put: cookies are saved in the form of key-value pairs, that is, in the key=value format. Each cookie is generally separated by ";"

In H5, webStorage actually stores data on the web, which is divided into two types:

sessionStorage The data stored when the browser is closed will Disappear---Temporary storage
localStorage can always exist---Permanent storage

Settings

session storage:

sessionStorage.setItem("smessage",dataDom.value);

Get

sessionStorage.getItem("smessage")

removeItem delete key

Purpose: Delete the value of the local storage of the specified key

Usage: .removeItem(key)
Code Example:
sessionStorage.removeItem("key"); localStorage.removeItem("site");


clear Clear all key/value
Purpose: Clear all key/value
Usage: .clear()
Code example:
sessionStorage.clear(); localStorage.clear();

1. Cookies are generally not larger than 4095kb; access will be slow if set too much ;

2. Both the client and the server can access the data

3. There is a limited period

local storage: only the local browser can access, each domain size is 5M

There is no expiration time; Deposit and retrieve;

Cookies are saved in the form of key-value pairs, that is, in the key=value format. Each cookie is usually separated by ";".

document.cookie="name="+username;
var username=document.cookie.split(";")[0].split("=")[1];

//JS cookie operation method!

//Write 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();
}

//Get cookie

function getCookie(name)

{
var arr,reg=new RegExp("(^| )"+name+" =([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//Delete 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() ;
}
//Usage example
setCookie("name","hayden");
alert(getCookie("name"));
//If you need to set customization Expiration time
//Then replace the above setCookie function with the following two functions.
//Program code
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;
}
}
//This is an example of setting the expiration time:
//s20 represents 20 seconds
//h refers to the hour, such as 12 hours: h12
//d is the number of days, 30 days: 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();

The above is the detailed content of Examples of browser storage technologies cookie and session. For more information, please follow other related articles on the PHP Chinese website!