前端小白學習數據緩存筆記

web存儲機制

storage類型介紹

storage類型是來存儲名值對兒，是保存在瀏覽器端的，存儲爲key-value形式的。

1. key:做爲存儲數據的標識（惟一且不可重複）

2. value：存儲數據的內容（number/string）

該類型的實例對象有關於存儲的方法以下：

（1） clear()：刪除全部值。

（2） getItem():根據指定的名字（key）獲取對應的值。

（3） key(index):獲取index位置處的值的名字（key）。

（4） removeItem():刪除由name指定的名值對兒。

（5） setItem(name,value): 爲指定的name 設置一個對應的值。

（6） Storage.length ：返回一個整數，表示存儲在 Storage 對象中的數據項數量。這個是 Storage 對象的一個屬性，並且是一個 只讀 屬性

storage特性

該類型只能存儲字符串,非字符串的數據會在存儲以前轉換成字符串。

sessionStorage對象

sessionStorage對象存儲是web stroage機制的一種，該對象會給每個給定的源維持一個獨立的存儲區域，該區域在頁面會話期間可用（即只要瀏覽器處於打開狀態，包括頁面從新加載和恢復） sessionStorage對象是綁定在服務器會話的，因此當文件在本地運行的時候是不能跨頁面訪問的，使用服務器地址訪問時才能多頁面訪問。

在另外一個頁面打開是找不到這個值的：

開啓服務器訪問：

再次使用服務器地址訪問的時候：

localStorage對象

localStorage也是web Stroage存儲機制的一種，localStorage對象是根據glocalStorage對象設計出來的簡化，glocalStorage的使用是要指定哪些域名能夠訪問該數據，是經過方括號標記使用該屬性來實現的：

//存數據
glocalStorage["baidu.com"].name="劉德華"
//取數據
var name=glocalStorage["baidu.com"].name
複製代碼

聽網上說是爲了安全性而後在HTML5的規範中用localStorage取代了glocalStorage不能本身設置域名，值使用localStorage對象時就將當前域名加入。規則設計出來就是方便咱們的使用的，顯然localStorage比以前的使用起來更簡單了。

我本身的理解根據該用戶不刪除數據，數據將會一直保存在磁盤裏的屬性，能夠設置收藏列表，用戶愛好等等。

//存數據
glocalStorage.setItem('content', '劉德華');
//取數據
glocalStorage.getItem('content');
複製代碼

二者的比較

不一樣點

數據存儲時長

sessionStorage:數據只保持在瀏覽器關閉

localStorage：用戶不刪除數據，數據將會一直保存在磁盤裏

訪問規則不一樣

localStorage：只要在相同的協議、相同的主機名、相同的端口下，就能讀取和修改到同一份 localStorage 存儲的數據。

sessionStorage：除了協議、主機名、端口外，還要求在同一窗口下。

相同點

1. 存儲大小都不能超過5M。

Http緩存

Last-Modified與if-Modified-Since

Last-Modified：響應頭，資源最新修改時間，由服務器告訴瀏覽器。 if-Modified-Since：請求頭，資源最新修改時間，由瀏覽器告訴服務器(其實就是上次服務器給的Last-Modified，請求又還給服務器對比)，和Last-Modified是一對，它兩會在服務器端進行對比。

請求過程

第一次請求數據

瀏覽器：服務器服務器，我如今須要一個users.json的文件，你找到了給我，順便給我文件修改時間！

服務器：行，文件修改時間我給你，到時候文件過時了咱兩覈對文件修改時間，對得上我就不找了，返回a.txt+Last-Modified。

第二次請求數據 瀏覽器：服務器服務器，我還須要一個users.json的文件，我把這個文件上次修改時間發你if-Modified-Since，你對比一下文件最近有不有修改！

服務器：ok，我幫你找一下。服務器將if-Modified-Since與Last-Modified作了個對比。

if-Modified-Since 與Last-Modified不相等，服務器查找了最新的users.json，同時再次返回全新的Last-Modified。

if-Modified-Since 與Last-Modified相等，服務器返回狀態碼304，文件沒修改過，你仍是用你的本地緩存。

Etag與If-None-Match

請求過程

Etag：響應頭，由服務器設置告訴瀏覽器。

if-None-Match：請求頭，由瀏覽器告訴服務器(其實就是上次服務器給的Etag)，和Etag是一對，它兩也會在服務器端進行對比。

瀏覽器：服務器服務器，我如今須要一個users.json的文件，你找到了給我！

服務器：你又來了，文件我找給你，我給你一個Etag(文件版本號)，到時候你再來找這個資源的時候把這個帶上，省的我再找給你，返回a.txt+Etag。

第二次請求數據 瀏覽器：服務器服務器，我又須要users.json文件了，我把你發給個人Etag放在If-None-Match裏面了，你對比一下最近這個文件有不有修改！

服務器：ok，我幫你找一下。服務器將Etag與If-None-Match作了個對比。 Etag與If-None-Match不相等，服務器查找了最新的users.json，同時再次返回全新的Etag(文件版本號)。

Etag與If-None-Match相等，服務器返回狀態碼304，文件沒修改過，你仍是用你的本地緩存。

Http頭部緩存和web緩存例子

模擬前端請求顯示數據

<ul id="users"></ul>
    <script> window.onload = function() { const users = JSON.parse(localStorage.getItem('usersdata')); console.log("users", users) const uluser = document.querySelector('#users'); if (users) { uluser.innerHTML = users.map(user => ` <li> ${user.username}-${user.place} </li> ` ) } fetch('/users') .then(data => data.json()) .then(data => { localStorage.setItem('usersdata', JSON.stringify(data)) //須要存儲字符串 console.log("users請求") uluser.innerHTML = data.map(user => ` <li> ${user.username}-${user.place} </li> ` ) }) } </script>
複製代碼

模擬服務器接收與發送

const http = require('http');
const fs = require('fs');
const users = require('./users.json')
http.createServer((req, res) => {
    let status = fs.statSync('users.json');//獲取文件的狀態
    if (req.url == '/') {
        res.writeHead(200, { "Content-Type": "text/html;charset=utf8" })
         fs.createReadStream('./users.html')pipe(res);//經過流返回顯示頁面
    } else if (req.url == '/users') {
        console.log("用戶數據請求")
        if (req.headers['if-modified-since']) {
            if (req.headers['if-modified-since'] == status.mtime) {//判斷請求中的修改時間與文件的修改時間是否相同
                console.log("未修改文件返回304")
                res.writeHead(304, { "Content-Type": "text/html;charset=utf8" });//304 Not Modified
                res.end();
                return;
            } else {
                res.setHeader('Last-Modified', status.mtime);
                res.writeHead(200, { "Content-Type": "text/html;charset=utf8" });
                console.log('修改了返回修改數據')
                res.end(JSON.stringify(users))
                return;
            }
        }
        console.log("用戶數據第一次")
        res.setHeader('Last-Modified', status.mtime);
        res.writeHead(200, { "Content-Type": "text/html;charset=utf8" });
        res.end(JSON.stringify(users))
    } else {
        res.end("null")
    }
}).listen('8088', () => {
    console.log('監聽8088')
})
複製代碼

結果分析

第一次請求數據服務器給咱們返回200狀態碼和Last-Modified，代碼中提示的地方提示出用戶爲第一次數據請求。

文件未修改，第二次請求數據服務端判斷出文件未修改，則返回304狀態碼官方解釋304:The HTTP 304 Not Modified client redirection response code indicates that there is no need to retransmit the requested resources.

文件修改，再次訪問，服務端檢測文件修改時間不同，則從新返回文件內容

結尾

緩存數據能夠節省許多資源，對於以上例子還有些缺陷，對於高頻訪問狀況仍是不能知足需求，技術就是須要不斷的探索。有什麼建議或者錯誤，歡迎指出！