js简介(cookie基础)

网络知识（了解）

通信协议

通信规则，设备与设备之间通信时共同遵守的规则

TCP/UDP/IP

IP： Internet Protocol（网络之间互连的协议），规定了计算机在因特网上进行通信时应当遵守的规则

IP地址：4个字节, 一共32位，用来标识设备在网络中的位置

TCP：Transmission Control Protocol（传输控制协议）

TCP面向连接的协议（通信之前必须先建立连接）
TCP相对可靠，它建立连接的过程称为3次握手
经历3次握手，才能建立连接
所有的消息传送，需要对方确认送达

//正常通信
A：”土豆，土豆，我是茄子，收到请回答”
B：”茄子，茄子，我是土豆，收到消息，有什么指示？”
A：”没事，没事，我以为你挂了呢”
A：”开始传送消息…”

//如果对方没回应，则不断重复发送当前消息，直至对方收到回应为止。
A：”茄子，茄子，我是土豆，我被人油炸了，现在改名叫薯片，收到请回答”
…………
A：”茄子，茄子，我是土豆，我被人油炸了，现在改名叫薯片，收到请回答，第2遍”
…………
A：”茄子，茄子，我是土豆，我被人油炸了，现在改名叫薯片，收到请回答，第3遍”
…………
B：”薯片，薯片，我收到消息”
因此可以确保数据的准确送达

UDP:面向数据报的协议 (不可靠的协议)，如果TCP比作是打电话，那么UDP就是在发短信

无需建立连接，发送消息也无需对方确认
无法保证数据的发送顺序，以及准确率
UDP通常用于视频、语音等通信（丢掉了一帧画面是无所谓的）

http/https

超文本传输协议HyperText Transfer Protocol，基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信.

http的特点是，请求完成后就立即断开与服务器的连接

缺点:
通信使用明文（不加密），内容可能会被窃听
不适用特定的Web服务器，如：聊天室，消息广播

socket

是一种通信模式，客户端与服务端一直保持着连接，用于随时传输数据

cookie的概念

cookie 是客户端与服务器端进行通讯使用的一个能够在浏览器本地化存储的技术

PS：chrome不支持本地文件的cookie读写

演示：利用sublimeserver开启服务器，演示cookie的设置与获取（了解协议域名端口）

cookie的基本设置及获取

设置:document.cookie = 'name=value'
    * 一次只能写入一个cookie
读取:document.cookie
	* 一次性读取所有cookie

案例：保存图片拖拽位置

// 1.鼠标松开，保存图片位置。即设置cookie：保存left,top
document.cookie = 'left=' + girl.style.left;//100px
document.cookie = 'top=' + girl.style.top;//100px
// 2.页面加载，获取cookie：获取top,left
var cookies = document.cookie;//得到所有cookie
cookies = cookies.split('; ');
//3. 遍历数组，找出top,left,给图片设置位置
cookies.forEach(function(cookie){
    var arr = cookie.split('=');
    if(arr[0] === 'left' || arr[0] === 'top'){
    	girl.style[arr[0]] = arr[1];
    }
});

案例:七天免登陆

btnSubmit.onclick = function(){
    // 5.表单submit按下即提交，不管满不满足条件。所以阻止默认行为
    e.preventDefault();
    // 1.获取用户名密码
    var _username = username.value.trim();
    var _password = password.value;
    //2.若用户名长度为0，退出函数。
    if(_username.length===0){
        alert('用户名不能为空');
        return;
    }
    //3.判断是否勾选"7天内免登陆"选项。若勾选保存cookie
    if(checkbox.checked){
        var d = new Date();
        d.setDate(d.getDate()+7);//d此时是一个UTC时间对象，转成字符串格式
        document.cookie = 'username=' + _username + ';expires='+d.toUTCString();
    }
    //4.不管有没有勾选，点击提交，显示跳转页面
    location.href = 'http://www.baidu.com';
}
// 6.下一次访问：判断页面是否存在cookie，是否存在username的cookie，若存在自动登录，即自动跳转到百度
var cookies = document.cookie;
//（1）判断页面是否存在cookie，即cookie长度不为0
if(cookies.length>0){
    cookies = cookies.split('; ');
    cookies.forEach(function(item){
        var arr = item.split('=');
        //（2）是否存在username的cookie
        if(arr[0] === 'username'){
            location.href = 'http://www.baidu.com';
        }
    });
}

cookie的组成部分

格式：'name=value[;expires=xx][;path=/][;domain=xxx]'
参数：
	expires：有效期
		默认Session：临时cookie（关闭浏览器会被清除）
		格式：'expires=' + d.toUTCString
	path：保存cookie的位置
		默认当前html所在目录
		格式：'path=/'
    domain：域名
    	默认：当前域名
读取：document.cookie（读取当前能访问的所有cookie）
	当前目录->根目录

封装cookie的操作

var Cookie = {
    get:function(key){
        // 1.先获取所有cookie，若cookie没有值，返回空字符串
        var cookies = document.cookie;
        if(cookies.length === 0){
            return '';
        }
        // 2.拆分每一个cookie
        cookies = cookies.split('; ');
        for(var i=0;i<cookies.length;i++){
            var arr = cookies[i].split('=');
            if(arr[0] === key){
                return arr[1];
            }
        }
    },
    set:function(key,value,date,path){
        //拼接字符串
        var str = key + '=' + value;
        if(date){
            str += ';expires=' + date.toUTCString();
        }
        if(path){
            str += ';path='+path;
        }
        document.cookie = str;
    },
    remove:function(key,path){
        //获取过期的日期，重新设置cookie
        var d = new Date();
        d.setDate(d.getDate()-1);
        this.set(key,'x',d,path);
    },

    // 清空cookie
    clear:function(){
    }
}

cookie的限制

数量50个（不同浏览器值不同）

大小2m（不同浏览器值不同）

只能写入字符串

JSON

* 转换
    * 对象/数组 -> json字符串：JSON.stringify()
    * json字符串 -> 对象/数组：JSON.parse()
* 格式：
    * 属性名和字符串必须使用双引号
    * 不能有注释
    * 不能存在多余逗号
* 属性值必须为以下类型
    * String
    * Number
    * Boolean
    * Object
    * Array
    * Null

案例：将商品添加到购物车列表

// 3.每次刷新，拿到上一次的存放值。第一次是为空数组
// * 若已经存在值，默认为JSON字符串，要转回数组
var goodslist = Cookie.get('goodslist') || [];
if(typeof goodslist === 'string'){
    goodslist = JSON.parse(goodslist);
}
// 1.利用事件委托实现添加到购物车的效果
goods.onclick = function(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.parentNode.className === 'add2cart'){
        // 2.若当前为按钮被点击
        // （1）生成一个商品信息对象{guid，name，imgurl，price，qty（商品数量）}
        // （2）推入数组，将数组添加到cookie里面
        // （3）考虑如果商品信息已经添加过，则应该增加数组里面的该商品数量
        //     * 第一步:判断当前的guid是否在数组存在。
        //  * 第二步:若存在，拿到该商品信息在数组中的索引，利用索引将qty++
        var currentLi = target.parentNode.parentNode;
        var guid = currentLi.getAttribute('data-guid');
        var idx;
        var has = goodslist.some(function(g,i){
            idx = i;
            return g.guid === guid;
        });
        if(has){
            goodslist[idx].qty++;
        }else{
            var goods = {
                guid:guid,
                name:currentLi.children[1].innerText,
                imgurl:currentLi.children[0].src,
                price:currentLi.children[2].innerText,
                // 商品数量
                qty:1
            }
            goodslist.push(goods);
        }
        document.cookie = 'goodslist='+ JSON.stringify(goodslist);
    }

案例：显示购物车列表

//1.获取goodslist的cookie，根据cookie数据生成html结构
//2.遍历时同时计算总价给subPrice元素赋值
var goodslist;
render();
function render(){
    goodslist = Cookie.getCookie('goodslist') || [];
    if(typeof goodslist === 'string'){
        goodslist = JSON.parse(goodslist);
    }
    //2.遍历时，同时计算商品金额
    var total = 0;
    var ul = document.createElement('ul');
    ul.innerHTML = goodslist.map(function(goods){
        total += goods.price * goods.qty;
        return '<li data-guid="'+goods.guid+'">' + 
            '<img src="'+goods.imgurl+'">' + 
            '<h4>'+goods.name+'</h4>' + 
            '<p class="price">价格：<span>'+goods.price+'&times;'+goods.qty+'</span></p>' + 
            '<span class="btn-close">&times;</span>' + 
            '</li>'；
    }).join('');
    carList.innerHTML = '';
    carList.appendChild(ul);
    subPrice.innerHTML = total.toFixed(2);
}
// 3.点击按钮，移除cookie数据，重新渲染商品列表。同时阻止浏览器默认行为
btnClear.onclick = function(){
    Cookie.remove('goodslist');
    render();
    return false;
}
//4.当点击某个商品的删除时
//（1）获取到当前商品的guid，遍历数组goodslist，根据guid值相同，找到被删除的元素在数组中的索引。
//（2）通过索引，删除goodslist的中的某个商品。之后推出循环
//（3）重新生成cookie后，渲染
carList.onclick = function(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.className === 'btn-close'){
        var currentLi = target.parentNode;
        var guid = currentLi.getAttribute('data-guid');
        for(var i=0;i<goodslist.length;i++){
            if(goodslist[i].guid === guid){
                goodslist.splice(i,1);
                break;
            }
        }
        Cookie.set('goodslist',JSON.stringify(goodslist));
        render();
    }
}