web前端cookie笔记

web前端cookie笔记

cookie/localstorage/sessionStorage之间的区别

• cookie：cookie很小，限制为4KB。主要用途有保存登录信息，存储一些用户信息。
• localstorage：本地存储，是HTML5新增的技术，localstorage被大多数浏览器支持，主要用途有存储各种信息。
• sessionStorage：会话存储，就是存储在会话当中，关掉会话窗口，数据清楚。

三者的异同

1.数据的生命周期

• cookie：一般由服务器生成，可以失效时间。如果是由浏览器端生成，那么一般是关闭浏览器则失效。
• localstorage：除非手动清除，否则一直存在。
• sessionStorage：关闭会话或者浏览器则会被清除。

2.存放数据大小

• cookie：4KB左右。
• localstorage：一般为5MB。
• sessionStorage：一般没有限制，因为是存储在会话当中。

3.与服务端的通信

• cookie：一般会携带在HTTP头中。存储数据过多影响性能。
• localstorage：不与服务器进行通信。浏览器端。
• sessionStorage：不与服务器进行通信。浏览器端。

4.易用性

• cookie：大部分情况需要我们自己封装。不太安全。
• localstorage：原生接口可用，而且一般就用原生接口。
• sessionStorage：原生接口可用，而且一般就用原生接口。

实践

1.localstorage()

• 存储：localstorage.setItem(‘key’,value);
• 获取：localstorage.getItem(‘key’)

2.sessionStorage()

• 存储：sessionStorage.setItem(‘key’,value);
• 获取：sessionStorage.getItem(‘key’)

session

• session存储在服务端。sessionID存储在cookie中作为唯一标识。

session与cookie比较

cookie

• 数据存储在浏览器端
• 特点：方便与JS交换数据，方便获取用户信息。
• 风险：浏览器可能会禁用cookie。

session

• 数据存储在服务端
• 特点：高效，安全，不依赖浏览器环境，服务器端会为每一个用户分配一个ID标识。