1. First, a brief summary of the next cookie
cookie: session tracking can be done
Features:
1, the size limit (not exceed 4k)
2, each domain cookie can not be more than 50 under
3, valid (and set time-related), and have a valid cookie will be automatically deleted
4, cookie read (cookie can only be accessed under the same domain name) (limit domain)
5, there is no set time a cookie is stored in a temporary cookie, the browser is closed automatically deleted
6, cookie values can only be a string
7, cookie access: access to the parent of the child but the parent can not access the cookie son of cookie;
1.1 cookie storage
Examples to explain:
Based on registration function cookie stored:
Store cookie:
reg.onclick = function(){
// user name and password is stored in the form of objects
was JSON = {
"username" : uname.value,
"password" : upwd.value
}
// begin storing cookie
document.cookie = "userinfo="+JSON.stringify(json) ;
// Go to the login page
location.href = "../b/login.html";
}
Get cookie:
After the page loads // get cookie data
window.onload = function(){
// Remove the cookie data
var str = document.cookie;//userinfo={"username":"admin","password":"111"}
var _json = JSON.parse(str.split("=")[1]);//'{"username":"admin","password":"111"}'
log.onclick = function(){
// If the user enters a user name and password and cookie in the user name and password login prompt equal success
if( uname.value == _json.username && upwd.value==_json.password ){
alert ( "Login successful");
}else{
alert ( "user name or password error");
}
}
}
Ejie classic case:
cookie usage of simple shopping cart
Storing data:
var oUl = document.querySelector("ul");
var _json = {}; // a stored object data
var arr = []; // save for a plurality of objects
var pid = 1; // Item No.
// use delegates for each of the Add to Cart button to add a click event
oUl.addEventListener("click",(e)=>{
var e = e || event;
var target = e.target || e.srcElement;
if( target.className === "addMe" ){
// will be credited to the current click product data into one object
_json = {
"pid" : pid++,
"pname" : target.parentNode.parentNode.children[0].innerHTML,
"price" : target.parentNode.parentNode.children[1].innerHTML
}
// objects stored in the array
arr.push( _json );
// array is stored in a cookie
document.cookie = "prolist=" + JSON.stringify(arr);
}
})
take out:
window.onload = function(){
// remove the page loads data
var str = document.cookie;
// string split product obtained data array
var arr = JSON.parse(str.split("=")[1]);
var sum = 0; // accumulated amount
var str = "";
// data through the array of data to be displayed on the page
for( var i = 0 ; i < arr.length ; i++ ){
was pro = arr [i];
sum += Number(pro.price);
str += `<li><span>${pro.pid}</span><span>${pro.pname}</span><span>${pro.price}</span></li>`;
}
demo.innerHTML += str;
// Click the button to display the amount
btn.onclick = function(){
t.value = sum;
}
}
2.localstorage local store
Basic Usage: delete access change
// store data (increase data)
btnSave.onclick = function(){
// define a localStorage
var storage = window.localStorage;
// to data stored in storage
//method one:
storage.sname = "jack";
// Second way:
storage["age"] = 18;
// Three ways:
storage.setItem( "tel" , "132xxx" );
}
// fetch data
btnGet.onclick = function(){
// define a localStorage
var storage = window.localStorage;
// retrieve data according to the key value in localStorage
console.log( storage.sname , storage["age"] , storage.getItem("tel") );
}
// change data
btnUpt.onclick = function(){
// define a localStorage
var storage = window.localStorage;
// to data stored in storage
//method one:
storage.sname = "lily";
// Second way:
storage["age"] = 18;
// Three ways:
storage.setItem( "tel" , "156xxx" );
}
// delete the data: According delete key
btnDel.onclick = function(){
// define a localStorage
var storage = window.localStorage;
// delete certain data according to the key
//storage.removeItem("tel");
// Clear
storage.clear();
}