cookie基本操作

Cookie基本操作

cookie:在客户端和服务端都可以进行操作。（获取，设置，删除），客户端写入本地硬盘

cookie：通过浏览器往计算机本地硬盘写入数据。

必须在服务器环境下才可以操作cookie

客户端操作cookie

获取：document.cookie,也可以通过控制台的application看到cookie
	只会返回对应域名下的cookie给客户端：

设置cookie：
    document.cookie='username=xiaoming' //键值对的形式存在
    在设置一条document.cookie='age=20',并不是覆盖，但是在设置一条document.cookie='username=ccc',会覆盖
    多个cookie的值，在客户端是通过   分号+空格隔开；
删除cookie：
    ~~//?~~ 
cookie特点：
    同一个域名下，多个页面的cookie是共享的；

    cookie可以再发起一个后端请求的时候，通过request  header把客户端cookie传输给后端；

    php通过$_COOKIE[]进行获取；
    php通过setcookie('gender','男')进行设置

    默认情况下，是临时存储的，在不关闭浏览器的情况下是不变的，但是关闭就没了
    如果想让客户端长期存在，要设置express（过期时间）
        var data=new Date();
        data.setDate(data.getDate()+5)
        document.cookie='username=xiaoming; expires='+data
    path:同域下的路径，当前路径一下的文件都可以获取到共享的cookie。
        多层级的共享cookie
        document.cookie='age=20; path=/20190906'

domain:cookie中也可能产生跨域问题：只能解决主域名和二级域名之间的问题 domain =a.com
cookie在主域名和二级域名之间存在跨域问题：www.a.com(主域名),sports.a.com（二级域名）

WebStorage:html5提供了一种新的本地存储方式（在客户端电脑里存储更多的数据，对大量数据的缓存）

特点：1，不需要服务器，设置，获取，删除都是在客户端完成，

2，储存量不同，cookie只有4kb，他有5M；

webStorage的特性：两种模式：

1，sessionStorage：临时存储,数据是不共享的，

2，localStorage：永久存储，数据是共享的

设置：

sessionStorage.setItem('username','xiaoming')
localStorage.setItem('username','xiaoming')

获取：

localStorage.getItem('username')

删除cookie：

删除指定的一条：localStorage.removeItem('username')
删除所有的：localStorage.clear()

用cookie，storage：存储大量的数据（json数据）

var json={'username':'xiaoming'}
localStorage.setItem('data', JSON.stringify(json) );//先把数据换成字符串
console.log( JSON.parse(localStorage.getItem('data')) );

把数据进行编码：document.cookie = 'username=' + encodeURIComponent('小名');//输出乱码
    
decodeURIComponent(document.cookie)//输出小名