1.首先简单总结下cookie
cookie：可以做会话跟踪
特点:
1、大小限制（不能超过4k）
2、每个域下cookie不能超过50个
3、有效期（和设定时间有关），过了有效期cookie会自动删除
4、cookie读取（只能访问同一个域名下的cookie）(域的限制)
5、没有设置存储时间的cookie是临时cookie，浏览器关闭自动删除
6、cookie值只能是字符串
7、cookie访问：子能访问父的cookie 但是父不能访问子的cookie;
1.1 cookie的存储
实例讲解：
基于cookie存储的注册功能：
存储cookie：
reg.onclick = function(){
//将用户名和密码以对象的形式存储
var json = {
"username" : uname.value,
"password" : upwd.value
}
//开始存储cookie
document.cookie = "userinfo="+JSON.stringify(json) ;
//跳转到登录页面
location.href = "../b/login.html";
}
获取cookie：
//页面加载后 获取cookie数据
window.onload = function(){
//取出cookie数据
var str = document.cookie;//userinfo={"username":"admin","password":"111"}
var _json = JSON.parse(str.split("=")[1]);//'{"username":"admin","password":"111"}'
log.onclick = function(){
//如果用户输入的用户名和密码与cookie中的用户名和密码相等 提示登录成功
if( uname.value == _json.username && upwd.value==_json.password ){
alert("登录成功");
}else{
alert("用户名或密码错误");
}
}
}
娥姐经典案例：
cookie用法之简易购物车
存储数据：
var oUl = document.querySelector("ul");
var _json = {};//存一个对象数据
var arr = [];//存好多个对象
var pid = 1;//商品编号
//使用委托为每一个 加入购物车按钮 添加单击事件
oUl.addEventListener("click",(e)=>{
var e = e || event;
var target = e.target || e.srcElement;
if( target.className === "addMe" ){
//将当前点击的商品数据存入到一个对象中
_json = {
"pid" : pid++,
"pname" : target.parentNode.parentNode.children[0].innerHTML,
"price" : target.parentNode.parentNode.children[1].innerHTML
}
//将对象存入到数组中
arr.push( _json );
//将数组存入到cookie中
document.cookie = "prolist=" + JSON.stringify(arr);
}
})
取出：
window.onload = function(){
//页面加载取出数据
var str = document.cookie;
//拆分字符串得到商品数据 数组
var arr = JSON.parse(str.split("=")[1]);
var sum = 0;//累加金额
var str = "";
//遍历数组中的数据 将数据显示到页面上
for( var i = 0 ; i < arr.length ; i++ ){
var 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;
//点击按钮 显示金额
btn.onclick = function(){
t.value = sum;
}
}
2.localstorage 本地存储
基本用法： 存取改删
//存数据（增加数据）
btnSave.onclick = function(){
//定义一个localStorage
var storage = window.localStorage;
//向storage中存储数据
//方式一：
storage.sname = "jack";
//方式二：
storage["age"] = 18;
//方式三：
storage.setItem( "tel" , "132xxx" );
}
//取数据
btnGet.onclick = function(){
//定义一个localStorage
var storage = window.localStorage;
//取出localStorage中的数据 根据键取值
console.log( storage.sname , storage["age"] , storage.getItem("tel") );
}
//改数据
btnUpt.onclick = function(){
//定义一个localStorage
var storage = window.localStorage;
//向storage中存储数据
//方式一：
storage.sname = "lily";
//方式二：
storage["age"] = 18;
//方式三：
storage.setItem( "tel" , "156xxx" );
}
//删数据 ：根据键删除
btnDel.onclick = function(){
//定义一个localStorage
var storage = window.localStorage;
//根据键删除某个数据
//storage.removeItem("tel");
//清空
storage.clear();
}