Cookie localStorage sessionStorage的异同
以下来自：详说 Cookie, LocalStorage 与 SessionStorage
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 应用 | 身份标识 | 存储数据 | 存储数据 |
| 数据的生命周期 | （一般由服务器生成）可自由设置失效时间。 | 数据持久化 | 存在于一次session会话，关闭页面后销毁 |
| 数据结构 | 键值对的集合 | 键值对的集合 | 键值对的集合 |
| 存放数据 | 每条4KB，一般50条（IE6 20），客户端最多300条 | 一般为5MB | 同（localStorage） |
| 存放位置 | 客户端 | 客户端 | 客户端 |
| 作用域 | （可设置）本域和任何父域 | 在所有同源窗口中共享 | 当前会话窗口 |
| 与服务器端通信 | 携带在HTTP头中参与通信，影响请求响应时间 | 仅存在于客户端（即浏览器）中，不参与通信 | 同（localStorage） |
| 数据提交 | 被动（全部提交） | 主动（选择性） | 主动（选择性） |
| 安全性 | 明文（不安全） | 明文（不安全） | 明文（不安全） |
1、Cookie
1、Cookie是在RFC2109里初次被提及，是为了辨别用户信息而存储在客户端的数据。
2、每个客户端最多保持300个Cookie，每个域名下一般为50个（IE 6仅20个）
3、每个Cookie最多存储最多4KB
4、Cookie的信息每次发起请求都会随请求头提交给服务器
5、Cookies 使用不同的源定义方式。一个页面可以为本域和任何父域设置cookie，只要是父域不是公共后缀（public suffix）即可。Firefox 和 Chrome 使用 Public Suffix List 决定一个域是否是一个公共后缀（public suffix）。Internet Explorer使用其自己的内部方法来确定域是否是公共后缀。不管使用哪个协议（HTTP/HTTPS）或端口号，浏览器都允许给定的域以及其任何子域名(sub-domains) 访问 cookie。设置 cookie 时，你可以使用Domain，Path，Secure，和Http-Only标记来限定其访问性。读取 cookie 时，不会知晓它的出处。 即使您仅使用安全的https连接，您看到的任何cookie都可能使用不安全的连接进行设置。
1、客户端设置Cookie（HTTP响应中）
Set-cookie:name='...name';expires='...date';path='...path';domain='...domain'
支持Cookie的浏览器将创建Cookie文件并保存（也可能是写入内存中）。用户
每次发起请求时浏览器根据条件过滤（expires path）后加入请求头响应：
请求头：Cookie: name='...name';Path='.../path'
2、Node中设置Cookie（response中提供了原生方法）：
res.cookie(name, value [, options]);
name: 类型为String
value: String或Object（自动序列化，JSON.stringify(obj)）
Option：Object
Option包含：
domain：String， //有效域名，默认网站域名
expires：Date， //过期时间，没有设置或为0，浏览器关闭后清除（当前session有效）
httpOnly: Boolean， //只能被WEB server访问
maxAge：String， // 类似expires 过期时间
path：String，//有效路径，默认'/'
secure：Boolean, //只能被https使用，默认false
singed：Boolean //使用签名，默认false（express ,cookie-parse ->> req.secret）
3、Koa中使用Cookie
ctx.cookies.get(name, [, options]) //获取
ctx.cookies.set(name, value, [options]) //设置
image
2、Session
Session（主要用来管理会话）是一种概念，表示用户从进入到离开网络应用这段时间内产生的动作以及上下文
1、HTTP中的Session
Cookie每次请求都随着HTTP发送给服务器，给每个Cookie一个唯一的ID用来记录用户
2、Session的步骤
1）生成SessionId
2）SessionId写入内存（一旦服务器断电或重启就会丢失，--redis持久化...）
3）将带有SessionId的Cookie发送给客户端
3、Koa中使用Session (koa-session)
const Koa = require('koa')
const session = require('koa-session')
const app = new Koa()
...
app.keys = ['secret key']
const CONFIG = {
key: 'login', /** (string) cookie key (default is koa:sess) */
/** (number || 'session') maxAge in ms (default is 1 days) */
/** 'session' will result in a cookie that expires when session/browser is closed */
/** Warning: If a session cookie is stolen, this cookie will never expire */
maxAge: 86400000, // (number) maxAge in ms (default is 1 days)
overwrite: true, /** (boolean) can overwrite or not (default true) */
httpOnly: true, /** (boolean) httpOnly or not (default true) */
signed: true, /** (boolean) signed or not (default true) */
rolling: false, /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false) */
renew: false, /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/
};
app.use(session(CONFIG, app))
....
router.get('/login', (ctx, next) => {
ctx.session.login = true
...
})
...
3、localStorage 与 sessionStorage (HTML5 Web Storage)
HTML web storage; better than cookies.
What is HTML Web Storage?
With web storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
Browser Support
The numbers in the table specify the first browser version that fully supports Web Storage.
| IE | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|
| localStorage | 8.0 | 3.5 | 4.0 | 4.0 | 11.5 |
| sessionStorage | 8.0 | 2.0 | 5.0 | 4.0 | 11.5 |
HTML Web Storage Objects
HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)
Before using web storage, check browser support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.
The following example counts the number of times a user has clicked a button, in the current session:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Web Storage带来的好处
以下来自：
请描述一下 cookies，sessionStorage 和 localStorage 的区别
减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
网友评论