cookie
存于客户端,由于http协议是无状态的,只要客户端与服务端数据交换完,就会断掉链接,如果再请求 就再次链接,而服务器是无法保存这种链接的状态,只有不停地链接、断链接,所以需要cookie来做一个身份认证,再次请求的时候服务器会根据这个身份id进行用户判断。
但要注意cookie是不可跨域的,他会根据域名来区分是向哪个服务器发送数据。
其次,cookie不能存一些敏感信息, 因为通过浏览器获取cookie很方便,很容易泄露一些个人信息,如果想存 最好是对数据进行加密
cookie的一些api,通过自己封装的例子看
var Cookie = {
//分装获取的方法 Cookie.get('name')
get: function(key){
var cookiestr = document.cookie; //读取本地的cookie
var list = cookiestr.split("; ");
for(var i=0; i<list.length; i++){
var kvs = list[i].split("=");
if(kvs[0]==key) {
return kvs[1]; //查询是否存在 存在返回 否则返回null
}
}
return null;
},
//封装写入cookie的方法 包括内容、有效期、路径,是否安全传输
set: function(key,value,expires,path){
if( (typeof expires == "number") || (typeof expires == "string")) {
expires = Number(expires);
if(isNaN(expires)) {
expires = undefined;
} else {
var d = new Date();
d.setDate(d.getDate()+expires);
expires = d;
}
}
if( !(expires instanceof Date) && typeof expires == "object") {
expires = undefined;
}
//cookie的写入 用json字符串形式 调用的时候用Cookie.set('name','zhangsan','/')
document.cookie = key+"="+value+";" + (expires?"expires="+expires+";":"") + (path?"path="+path+";":"");
}
}
HTML5提供了两种本地存储的方式 sessionStorage 和 localStorage
sessionStorage
是用户从打开回话窗到关闭会话窗这一段时间有效,关闭之后存的数据就会被删除
sessionStorage.setItem('name','alice');
var username = sessionStorage.getItem('name')
sessionStorage.remove('name')
sessionStorage.clear()
localStorage 会一直存在浏览器中 除非人工清除 方法同上
其次,我们可以对localstorage和sessionStorage的属性值进行遍历
var storage = window.localStorage;
var length = storage.length;
for(let i=-;i<length;i++){
console.log(storage.key(i),storage.getItem(key))
}
cookie 和 localStorage sessionStorage 区别
三者都存在客户端 而且同源,同协议 同域名 同端口
cookie会在http请求中携带,会在服务器和客户端间传递,所以cookie会有大小限制,不能超过4k,而且存在在设定的path下。
sessionStorage和localStorage只会存在本地,大小要比cookie大,其中sessionStorage是仅在当前的会话窗口有效,不是所有窗口都可以共享数据的。其它两个是真个浏览器都可以数据共享。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。