sessionStorage和localStorage以及cookie区别和用法

sessionStorage和localStorage以及cookie区别和用法

webstorage

webstorage是本地存储，存在客户端，包括localStorage和sessionStorage。localStorage生命周期永久，意味着只有用户在浏览器提供的UI上手动清除localStorage信息，否则这些信息永远存在，存数据大小一般为5M，且在客户端（浏览器）中保存，不参与服务器的通信。

sessionStorage仅在当前回话有效，关闭页面或者浏览器以后被清除，存放数据大小一般为5M，仅仅在客户浏览器中保存，不参与服务器通信。刷新页面后不会丢失。

webstorage使用的时候有相同的API

lacalStorage.setItem("key","value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();//清空localStorage中所有信息

举个栗子

仿一下京东官网顶部的广告关闭，效果为第一次进入官网会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告。

不同点：

作用域不同，相同浏览器下，在同一域名和端口下的不同页面可以共享相同的localStorage信息，但是不能共享sessionStorage的信息。如果一个标签页包含多个iframe标签且属于同源页面，那么他们之间是可以共享sessionStorage的。

cookie

存在浏览器端，且同源。生命周期为设置cookie过期之前一直有效，即使窗口或者浏览器关闭，只要不过期一直有效。存放数据大小为4K左右，有个数限制，一般不超过20个，与服务器端通信，每次都会携带到HTTP请求头这种，如果使用cookie保存过多的数据，会带来性能问题，但是cookie需要程序员自己封装。

cookie对的优缺点

优点：

• 通过良好的编程，控制保存在cookie中的session对象的大小。
• 通过加密和安全传输技术，减少cookie被破解对的可能性
• 只有在cookie这种存放不敏感的数据，即使被盗也不会有很大的损失
• 控制cookie对的生命周期，使之不会永远有效。

缺点

• cookie长度和数量有限制，每个cookie长度不能超过4KB，超出部分会被裁掉。
• 安全问题，如果cookie被人拦截，那个人就可以获取到所有session信息，加密也不起作用

cookie 和 webstorage共同点：都是存在浏览器客户端的