cookie和sessionstorage和localstorage区别

cookie

cookie的介绍

HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

cookie的机制

客户端发送一个请求到服务器 --》 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --》 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 --》服务器返回响应数据

cookie属性项

属性项	属性项介绍
NAME=VALUE	键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样
Expires	过期时间，在设置的某个时间点后该 Cookie 就会失效
Domain	生成该 Cookie 的域名，如 domain=“www.baidu.com”
Path	该 Cookie 是在当前的哪个路径下生成的，如 path=/wp-admin/
Secure	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

session

什么是session

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上(内存或硬盘)。一般Session存储在服务器的内存中，tomcat的StandardManager类将session存储在内存中，也可以持久化到file，数据库，memcache，redis等。
客户端只保存sessionid到cookie中，而不会保存session，session销毁只能通过invalidate或超时(默认30分钟)，关掉浏览器并不会关闭session。
这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。

session的读取

HttpSession session = request.getSession();
//设置属性
session.setAttribute("name","tom");
//读取属性
session.getAttribute("name");
//移除属性
session.removeAttribute("name");
//设置有效期，单位为秒，-1代表永不过期
session.setMaxInactiveInterval(1000);
//使其失效
session.invalidate();

本地存储

webstorage本地存储

1. webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
2. localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
3. sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

sessionStorage

sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法

//存储
sessionStorage.setItem("name", "zs");

//读取
var name= sessionStorage.getItem("name");

//删除指定键的数据语法：
sessionStorage.removeItem("name");

//删除所有数据：
sessionStorage.clear();

特点:

1. sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭
2. 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
3. sessionStorage为临时保存

localStorage

在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性

if(！window.localStorage){
    alert("浏览器支持localstorage");
    return false;
}else{
  
}

localStorage的写入，localStorage的写入有三种方法

if(！window.localStorage){
    alert("浏览器支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.a=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);  //string
    console.log(typeof storage["b"]);//string
    console.log(typeof storage["c"]);//string
}

localStorage的读取

if(!window.localStorage){
    alert("浏览器支持localstorage");
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*分割线*/
    storage.a=4;
    console.log(storage.a);
}

localStorage的删除
将localStorage的所有内容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2.将localStorage中的某个键值对删除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

localStorage的键获取

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

特点:

1. localStorage也是Storage类型的一个对象
2. 在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)
3. localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在
4. 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
5. localStorage为永久保存

区别

本地储存localStorage与cookie的区别

1. cookie在浏览器与服务器之间来回传递
   sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
2. 数据有效期不同
   cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
   sessionStorage：仅在当前浏览器窗口关闭前有效
   localStorage 始终有效，长期保存
3. cookie数据还有路径的概念，可以限制cookie只属于某个路径下
   存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4. 作用域不用
   sessionStorage不在不同的浏览器窗口中共享
   localStorage在所有同源窗口中都是共享的
   cookie也是在所有同源窗口中都是共享的
   WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便

cookie和session的区别

1. cookie数据存放在客户的浏览器上，session数据放在服务器上
2. cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session
3. session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4. 单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
5. 建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6. session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息
7. session中保存的是对象，cookie中保存的是字符串
8. session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

sessionStorage、localStorage和cookie的区别

1. 相同点是都是保存在浏览器端、且同源的
2. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
3. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
5. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
6. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
7. web Storage的api接口使用更方便