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)//输出小名