浏览器存储
2020-04-16 11:09:04 0 举报AI智能生成
前端浏览器存储知识总结
作者其他创作
大纲/内容
cookie
HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，
它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。
Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面：
Cookie曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，
但现在随着现代浏览器开始支持各种各样的存储方式，Cookie渐渐被淘汰。
由于服务器指定Cookie后，浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销（尤其是在移动环境下）。
新的浏览器API已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。
它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。
Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面：
- 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为等）
Cookie曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，
但现在随着现代浏览器开始支持各种各样的存储方式，Cookie渐渐被淘汰。
由于服务器指定Cookie后，浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销（尤其是在移动环境下）。
新的浏览器API已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。
有效期
会话期 Cookie
会话期Cookie是最简单的Cookie：浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。
会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。
需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie也会被保留下来，就好像浏览器从来没有关闭一样。
会话期Cookie不需要指定过期时间（Expires）或者有效期（Max-Age）。
需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie也会被保留下来，就好像浏览器从来没有关闭一样。
持久性 Cookie
持久性Cookie可以指定一个特定的 过期时间（Expires）或有效期（Max-Age）。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
提示：当Cookie的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
提示：当Cookie的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。
大小
单个 cookie 大小 ：一般是 4095 字节
每个域 cookie 个数：一般 30～50 个
每个域 cookie 总大小： 不要超过 4095 字节
每个域 cookie 个数：一般 30～50 个
每个域 cookie 总大小： 不要超过 4095 字节
作用域
Domain 和 Path 标识定义了Cookie的作用域：即Cookie应该发送给哪些URL。
Domain
Domain 标识指定了哪些主机可以接受Cookie。
如果不指定，默认为当前文档的主机（不包含子域名）。
如果指定了Domain，则包含子域名。
例如，如果设置 Domain=mozilla.org，则Cookie也包含在子域名中（如developer.mozilla.org）。
如果不指定，默认为当前文档的主机（不包含子域名）。
如果指定了Domain，则包含子域名。
例如，如果设置 Domain=mozilla.org，则Cookie也包含在子域名中（如developer.mozilla.org）。
Path
Path indicates a URL path that must exist in the requested URL in order to send the Cookie header.
Path 指定了一个为了发送 Cookie header 必须存在于请求的 URL 中的 URL 路径。
以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。
例如，设置 Path=/docs，则以下地址都会匹配：
/docs
/docs/Web/
/docs/Web/HTTP
Path 指定了一个为了发送 Cookie header 必须存在于请求的 URL 中的 URL 路径。
以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。
例如，设置 Path=/docs，则以下地址都会匹配：
/docs
/docs/Web/
/docs/Web/HTTP
Web Storage
Web Storage API 使浏览器能以一种比使用Cookie更直观的方式存储键/值对。
sessionStorage
为每一个给定的源（given origin）维持一个独立的存储区域。
- Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
- Data is never transferred to the server.
- Storage limit is larger than a cookie (at most 5MB).
- A page session lasts as long as the browser is open, and survives over page reloads and restores.
- Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
- Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
- Closing a tab/window ends the session and clears objects in sessionStorage.
Data stored in sessionStorage is specific to the protocol of the page.
In other words, http://example.com will have separate storage than https://example.com.
In other words, http://example.com will have separate storage than https://example.com.
localStorage
与 sessionStorage 同样的功能，但是在浏览器关闭然后重新打开后数据仍然存在。
5M左右，各浏览器的存储空间有差异。
封装方法设置失效时间
const myLocalStorage = {
set(key, data, time) {
let obj = {
data,
createTime: Date.now(),
lifeTime: time || 1000 * 60 * 60 //默认设置过期时间一个小时
};
localStorage.setItem(key, JSON.stringify(obj));
},
get(key) {
let obj = JSON.parse(localStorage.getItem(key));
let {data,createTime,lifeTime}=obj
let getTime = Date.now();
if (getTime - createTime >= lifeTime) {
localStorage.removeItem(key);
return null;
} else {
return data;
}
}
};
set(key, data, time) {
let obj = {
data,
createTime: Date.now(),
lifeTime: time || 1000 * 60 * 60 //默认设置过期时间一个小时
};
localStorage.setItem(key, JSON.stringify(obj));
},
get(key) {
let obj = JSON.parse(localStorage.getItem(key));
let {data,createTime,lifeTime}=obj
let getTime = Date.now();
if (getTime - createTime >= lifeTime) {
localStorage.removeItem(key);
return null;
} else {
return data;
}
}
};
参考文章
https://www.cnblogs.com/caizhenbo/p/6594443.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API
https://www.cnblogs.com/candy-xia/p/11561542.html
职业：本科
0 条评论
下一页
