前端小菜鸟带你一起学习cookie、session和Web Storage_webstorage和cookie需要学吗

你真的了解cookie、seesion和Web Storage嘛

一、cookie和session的区别和联系

cookie和session都是用来跟踪浏览器用户身份的会话方式。

1. cookie数据存放在用户的浏览器上，session数据存放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全的问题应该使用session。
3. session会在一定时间内保存在服务器上，当访问次数增多的时候，会比较占用服务器性能，考虑到减轻服务器性能方面，应该使用cookie。
4. cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

综上：登录等重要信息需要存放在session上，其他信息如果需要保留可以存放在cookie上

cookie介绍

1. cookie默认不会保存任何数据

document.cookie = "age=20";  //保存数据
document.cook;  //获取数据
1
2

2. 默认情况下，cookie的生命周期为一次会话，浏览器关闭数据就会过期，如果通过expires设置了过期时间并且过期时间没有过期，那么下次打开浏览器时数据就还是存在的，如果通过expires设置了过期时间并且已经过期了，那么就会立即删除保存的数据。

var millisecond = new Date().getTime();
var expiresTime = new Date(millisecond + 60 * 1000 * 15);  //十五分钟后过期
 
Cookies.set('name', 'value', {
   expires: expiresTime,
});
1
2
3
4
5
6

3. cookie不能一次性设置多条数据，要想保存多条数据只能一条一条的设置。
4. cookie有大小和个数限制，单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie。
5. 作用范围：同一个浏览器的同一个路径下访问，如果在同一个浏览器默认情况下，下一级路径就可以访问到。
6. 保存的时候尽量保存到根路径，这样上一级和下一级就都可以访问到。

document.cookie = "name=wxj; path=/;"
1

二、Web Storage

Web Storage是H5提供的本地存储的方式，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

Web Storage分为两种localStorage和sessionStorage：

• 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
• 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB。
• 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
• 生命周期：localStoragez中的数据可以永久的保存，即使关闭页面或者关闭浏览器也不会过期。sessionStorage的生命周期是在仅在当前会话下有效，关闭页面窗口或者关闭浏览器就会过期。
• localStorage在所有同源窗口中都是共享的，sessionStorage不在不同的浏览器窗口中共享，即使在同一个页面。

Web Storage相比于cookie存在的优势：

• 存储空间更大：cookie为4KB，而WebStorage是5MB。
• 安全性更高：Web Storage仅在本地保存，不像cookie会随着HTTP header发送到服务器端被拦截等。
• 速度快：因为存放在本地，获取数据时可以从本地获取会比从服务器端获取快得多。
• 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便。

介绍了这么多，大家对cookie、session、localStorage、sessionStorage有了一定的了解了吧，最开始的时候我在想session和sessionStorage到底有什么联系呢，sessionStorage是基于session得嘛，现在终于搞懂了，二者一点关系也没有，如果非要说有什么联系的话，可能就是名字里面都有session吧，那就再唠叨一下二者的区别吧

• session的数据存放在服务器上，而sessionStorage存放在本地浏览器中。
• session主要用于维护会话状态，而sessionStorage则是在会话期间存储一些数据。
• 关闭的当前页面或者浏览器，sessionStorage保存的数据会被删除，关闭浏览器或者服务器，session会过期，会话结束。