sessionStorage , localStorage和cookie三者的区别
sessionStorage 和 localStorage均为一个对象(一个持久化关联数组),索引(键名)和值(键值)都由字符串形式显示
两者不同之处在于对数据的有效期(存储多久)和作用域(不同的网站是否共享数据)
cookie除了名和值,还有一些可选的属性来控制cookie的有效期和作用域,cookie会在客户端每次请求时发送给服务器,一旦cookie过多会导致报头过大,造成浪费。
-
存储大小
sessionStorage 和 localStorage可以存储5MB的数据,而cookie不得超过4KB
-
有效期
sessionStorage 在浏览器关闭或者相应数据保存的网页(标签页)关闭,该网页的sessionStorage 内容将被清空,而localStorage则一直保留,除非代码设置清空或用户通过设置浏览器配置删除。
cookie的有效期是当整个浏览器关闭,随之消失。可以通过Expires和Max-Age属性设置cookie的过期时间,如果设置了,浏览器会将cookie内容写入磁盘中并保存,使其不会在浏览器关闭就删除。
- 作用域
localStorage的作用域是限定在文档源级别(文档源是通过协议,主机名以及端口号确定的,任意一项不相同,即是不同源的),同源的共享同样的localStorage数据,可相互读取甚至覆盖。(不同浏览器不可共享,如谷歌浏览器不可访问IE浏览器的数据)
sessionStorage的作用域也是限定在文档源级别,同时其还被限制于自己窗口下,即两个同源的标签页是不能共享数据的。如果一个窗口下有两个iframe元素,且包含的文档是同源的,那么这两者是可以共享数据的。
cookie也是通过文档源和文档路径来确定的,默认情况下,创建cookie 的web页中的cookie数据可以与该页面的同目录或者子目录共享。(作用域可以通过path和domain属性配置)
sessionStorage的方法(localStorage一样):
- 可以通过以下方式对其设值或添加值
window.sessionStorage.setItem('name','zjf');
window.sessionStorage['name'] = 'zjf';
window.sessionStorage.name = 'zjf';
- 可以通过以下方式获取索引字符串对应的值
let name = window.sessionStorage.getItem('name');
let name = window.sessionStorage['name'];
let name = window.sessionStorage.name;
- 可以通过以下方式删除索引字符串对应的值
window.sessionStorage.removeItem('name');
delete window.sessionStorage.name; //低版本浏览器不一定支持
- 删除所有保存的数据
window.sessionStorage.clear();
- 通过length和key()方法枚举所有存储的数据
for(var i = 0; i < window.sessionStorage.length; i++) {
var name = window.sessionStorage.key(i);
var value = window.sessionStorage.getItem(name);
console.log(name + ':' + value);
}
字段中的cookie
cookie的处理过程:
- 服务器向客户端发送cookie
- 浏览器将cookie保存
- 之后每次浏览器在请求都会将cookie发现服务器端
客户端发送的请求报文的cookie字段
"Cookie: foo=bar; baz=val" "http://127.0.0.1:3000/path?foo=bar&foo=baz"
响应报文的Set-Cookie字段
"Set-Cookie: name=value;Path=/;Expires=Sun,23-Apr-23 09:01:35 GMT;Domain=.domain.com"
- NAME=VALUE:赋予Cookie的名称和其值(必填项)
- expires=DATE:Cookie的有效期(若不明确指定则默认为浏览器关闭前为止)
- path=PATH:将服务器上的文件目录作为Cookie的适用对象(若不指明则认为文档所在的文件目录)
- domain=域名:作为Cookie适用对象的域名(若不指定则默认为创建Cookie的服务器的域名)
还有两个对Cookie进行出于安全目的的限制
- Secure:仅在HTTPS安全通信时才会发送Cookie
- HttpOnly:加以限制,使Cookie不能被JavaScript脚本访问
cookie的方法
- 保存cookie
function setcookie(name, value, daysToLive) {
//存储前需encodeURIComponent()对值进行编码,读取时需要decodeURIComponent()解码
var cookie = name + "=" + encodeURIComponent(value);
if(typeof daysToLive === "number") {
cookie += "; max-age=" + (daysToLive * 60 * 60 * 24);
cookie += "; path=" + (地址);
//各种属性可按以上格式添加
}
document.cookie = cookie;
}
- 读取cookie
function getcookie() {
var cookie = {};
var all = document.cookie;
if(all === "") return cookie;
var list = all.split(";"); //分离出名、值对
for(var i = 0; i < list.length; i++) {
var cookie = list[i];
var p = cookie.indexOf("=");//找到第一个‘=’的索引
var name = cookie.substring(0, p);//获取‘=’前的名
var value = cookie.substring(p+1);//获取‘=’后的值
value = decodeURIComponent(value);
cookie[name] = value;
}
return cookie;
}