原生js获取和设置cookie

1、document.cookie

可以获取得到cookie字符串，cookie都是键值对形式，所以得到的字符串为key=value形式，多个键值对之间用分号（;）拼接

存储在cookie中value值，一般需要适用escape()函数对字符串进行编码。

注：escape()不会对ASCII中的字母和数字以及 * @ - _ + . / 。进行编码，其他都会被替换成16进制的转义序列。unescape()可进行解码。

console.log(escape('测试123'))    //"%u6D4B%u8BD5123"

2、创建cookie

document.cookie=name+'='+escape(value)+';expires='+expiedDate.toGMTString()

name:自定义cookie的名称，value为对应的值，若需要设置过期时间，可以加上';expires='+expiedDate.toGMTString()，若无过期时间限制可省略expires

3、查询cookie

根据name值查询对应的value值

    function getCookie(name) {
    // var cookieStr=document.cookie;
     var cookieStr='zml=123;cc=90ddd;oo=oplm9';
        //判断是否有cookie值
        if (cookieStr.length) {
            //判断是否存在name值
            if (cookieStr.indexOf(name) !== -1) {
                var start_index = cookieStr.indexOf(name) + name.length + 1;
                var end_index = cookieStr.indexOf(';', start_index);
                if(end_index===-1){//若是最后一对cookie则不以；分号结尾
                end_index=cookieStr.length;
                }
                return cookieStr.substring(start_index, end_index);
            }
        }
        return '';
    }

 

4、cookies，sessionStorage 和 localStorage 的区别

html5中的Web Storage包括了两种存储方式sessionStorage和localStorage。和cookie相似，都是保存在浏览器端，但区别是它是为了更大容量存储设计的。

a、cookie数据始终在同源的http请求中携带，即使不使用，也在浏览器和服务器之间来回传递，会造成带宽的浪费。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地存储。

b、存储大小不同，cookie数据不能超过4k，只适合保存很小的数据。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大很多，可以达到5M或者更多。

c、数据有效期不同，cookie可以设置过期时间，sessionStorage是会话级的数据，浏览器关闭即清除，localStorage是永久性的数据，除非手动清除，否则一旦设置都一直存在。

d、sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。

f、Web Storage的api接口使用更加方便。例如： setItem,getItem,removeItem,clear等方法，不像cookie需要开发者自己封装setCookie，getCookie。