Web存储的几种方式的整理

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/
如无特殊说明,文章均为本站原创,转载请注明出处。如发现有什么不对的地方,希望得到您的指点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注