1.Cookie机制
1.1cookie出现的技术背景
为了解决http协议无状态的问题，1993年网景公司发明了cookie，定义在 RFC 2109 中。cookie的概念不是http协议标准中的部分，而是浏览器厂商追加进去的。
1.2cookie的结构
cookie采用的是键值对的字符串形式，以分号分隔，在http response 响应头中设置set-cooke字段可以告诉浏览器设置相关的cookie。当然，也可以在http request请求头中设置cookie字段来把cookie值发送给服务端。cookie的几个字段如下：
Expires：cookie最长有效期
Max-Age： 在 cookie 失效之前需要经过的秒数。秒数为 0 或 -1 将会使 cookie 直接过期。
Domain： 指定 cookie 可以送达的主机名。
Path： 指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部。
Secure： 一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
HttpOnly： 设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie属性、XMLHttpRequest 和Request APIs 进行访问，以防范跨站脚本攻击 。
SameSite =Strict | Lax ： 允许服务器设定一则 cookie 不随着跨域请求一起发送，这样可以在一定程度上防范跨站请求伪造攻击。
1.3cookie的生命周期
会话cookie伴随着浏览器的关闭而清空，如果cookie没有超时，会离线存储在本地硬盘上。
1.4cookie的使用
前端代码如下：
<script>
var now = new Date();
var expires = now.getTime() + 1000 * 60;
now.setTime(expires);
document.cookie = 'token=9527;' + 'expires=' + now.toUTCString();
document.cookie.split(';');
</script>后端代码如下：
setcookie("TestCookie", 'token=9527', time()+3600);1.5cookie的缺点
1.大小受限，不能超过4KB
2.安全性低，容易被csrf攻击
3.每次请求会自动发送cookie，增加网络流量
4.cookie的存储只支持字符串形式
2.localStorage 本地存储
2.1特性
localStorage是html5中解决cookie的问题而引入的新特性，在存储空间上，它可以容纳5M左右的大小。其存储格式还是传统的字符串形式，而生命周期则是持久化存储在本地。一次请求中，不会发送localStorage的数据给服务端。
2.2使用方式
localStorage.setItem('key', 'value');
// 从 localStorage获取数据
let data = localStorage.getItem('key');
// 从 localStorage删除保存的数据
localStorage.removeItem('key');
// 从 localStorage删除所有保存的数据
localStorage.clear();localStorage的读取和cookie类似
2.3优缺点
1.解决了cookie的存储空间大小问题，但是对于超过5M左右的数据还是无力
2.解决了cookie每次请求都会发送给服务端而带来耗费网络带宽的问题
3.浏览器兼容问题，老浏览器是不兼容的，现在大部分浏览器已经支持了，这个历史遗留问题也会随着时间的增长而慢慢褪去。
4.存储的方式是同步操作，只支持字符串形式。所以大数据速度会很慢
3.sessionStorage会话存储
sessionStorage和localStorage同为html5的产物，它们的区别就是前者的生命周期是基于页面或者是浏览器，当页面关闭或者浏览器退出，则自动清空sessionStorage中的内容
3.1代码示例
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
4. IndexedDB索引数据库
IndexedDB是W3C推出的键值对索引事务型数据库，与它有竞争关系的关系型数据库WebSql在2010年的时候W3C对其进行了废弃。
4.1代码示例
<script>
var version = 1;
var request = indexedDB.open("crud", version);
request.onupgradeneeded = function () {
var db = request.result;
//创建books数据库如果不存在的话
var store = db.createObjectStore("books", {keyPath: "isbn"});
//添加索引
var titleIndex = store.createIndex("title", "title", {unique: true});
var authorIndex = store.createIndex("author", "author");
//添加数据
store.put({title: "Hero", author: "Ahero", isbn: 123456});
store.put({title: "PHP", author: "APhp", isbn: 234567});
store.put({title: "Java", author: "AJava", isbn: 345678});
};
request.onsuccess = function (event) {
//打开数据库成功后进行查询操作
var db = event.target.result;
var tx = db.transaction("books", "readwrite");
var store = tx.objectStore("books");
//查询单条数据
var index = store.index("title");
var request = index.get("PHP");
request.onsuccess = function (event) {
var matching = request.result;
if (matching !== undefined) {
console.log(matching.isbn, matching.title, matching.author);
} else {
console.log('not found');
}
}
//删除数据根据KeyPath删除
store.delete(345678);
//遍历所有数据
store.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
} else {
console.log('finished');
}
}
};
</script>4.2优缺点
1.支持大数据，二进制文件
2.API操作是异步函数，可能对不习惯异步编程的人来说不友好
3.浏览器兼容性
5. localForage
Mozilla开发了localForage,它封装了IndexedDB、WebSql、LocalStorage三种存储方式，提供了友好的API接口函数以及争对浏览器不兼容的情况下自动降级的策略。支持ES6 Promises API
5.1代码示例
//添加数据
localforage.setItem('key', value').then(function (value) {
console.log(value);
}).catch(function(err) {
console.log(err);
});
//移除数据
localforage.removeItem('key').then(function() {
console.log('Key is cleared!');
}).catch(function(err) {
console.log(err);
});
//遍历数据
localforage.keys().then(function(keys) {
console.log(keys);
}).catch(function(err) {
console.log(err);
});6.参考
浏览器兼容检测
https://caniuse.com/
如无特殊说明，文章均为本站原创，转载请注明出处。如发现有什么不对的地方，希望得到您的指点。网络资料
https://localforage.docschina.org/