如何直接在網頁上做筆記并保存到Onenote？

nenote是微軟一款可以整理、組織并數字化絕大多數資料，例如文字、圖片、表格、錄音、錄像等的工具。Onenote可以隨時隨地將你需要的信息進行收錄，而且還能實現脫機編輯和隨后的同步合并，是一款非常強大的工具。

有的時候我們瀏覽網頁，看到非常有用的信息時，會希望立即把它記下來。Onenote支持在網頁上直接做筆記，加注釋，設置手寫筆記保存哦！

借助Windows10的新瀏覽器MicrosoftEdge，您可以在網頁上用鼠標書寫筆記、添加注釋，在支持觸摸的設備上手寫筆記。記錄完成后可以共享到OneNote。

打開MicrosoftEdge瀏覽器，瀏覽某個網頁時，如果你想要開始記錄，單擊右上角的圖標，進入筆記狀態。

左上角的各個圖標，可進行墨跡書寫、涂畫、截圖和擦除墨跡等不同的操作。

筆記記錄完成后，單擊右上角的保存或共享圖標，可以將筆記保存或共享至OneNote。

用OneNoteClipper剪輯網頁

OneNoteClipper可將網頁內容直接剪輯到OneNote中。可以選擇剪輯整個頁面或只剪輯文章，還可以選擇保存位置。Clipper是一款免費應用，可在應用商店里獲取。

打開Clipper后，單擊“剪輯至OneNote”。

按Ctrl+Shift+B，打開收藏夾欄。右鍵單擊“剪輯至OneNote”，選擇“添加到收藏夾”。

在瀏覽網頁時，看到希望收集的內容后，在IE瀏覽器的收藏夾欄，單擊“剪輯至OneNote”，再單擊“登錄”。

用Office365賬號或微軟賬號登錄。

再次在IE瀏覽器的收藏夾欄單擊“剪輯至OneNote”，在彈出的窗口中可選擇整頁或文章，并可指定保存位置。單擊“剪輯”，網頁內容被收集到OneNote中。

訪問您的OneNote筆記，可查看收集的網頁內容。

將網頁發送至OneNote

通過集成在IE瀏覽器中的“發送至OneNote”這一功能，我們能夠在任何網頁中迅速捕捉到需要的信息和資料，并收集到筆記中。

在IE瀏覽器中，從網頁中選取內容，單擊鼠標右鍵，選擇“SendtoOneNote”。

在對話框中，選擇要存放內容的分區，并單擊“確定”。

內容將直接存儲在筆記頁中，并在末尾插入來源網頁鏈接，以后可單擊此鏈接再次訪問相應的網頁。

學會了嗎？趕緊試試吧！

家好，Echa。

今天來分享常見的瀏覽器數據存儲方案：localStorage、sessionStorage、IndexedDB、Cookies。

1. 概述

現代瀏覽器中提供了多種存儲機制，打開瀏覽器的控制臺（Mac 可以使用 Command + Option + J 快捷鍵，Windows 可以使用 Control + Shift + J 快捷鍵）。選擇 Application 選項卡，可以在 Storage中看到 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies 等：

那數據存儲在瀏覽器中有什么使用場景呢？在以下情況下，將數據存儲在瀏覽器中成為更可行的選擇：

在瀏覽器存儲中保存應用狀態，比如保持用戶偏好（用戶特定的設置，例如亮模式或暗模式、字體大小等）；
創建離線工作的漸進式 Web 應用，除了初始下載和更新之外沒有服務器端要求；
緩存靜態應用資源，如 HTML、CSS、JS 和圖像等；
保存上一個瀏覽會話中的數據，例如存儲上一個會話中的購物車內容，待辦事項列表中的項目，記住用戶是否以前登錄過等。

無論哪種方式，將這些信息保存在客戶端可以減少額外且不必要的服務器調用，并幫助提供離線支持。不過，需要注意，由于實現差異，瀏覽器存儲機制在不同瀏覽器中的行為可能會有所不同。除此之外，許多瀏覽器已刪除對 Web SQL 的支持，建議將現有用法遷移到 IndexedDB。

所以下面我們將介紹 Local Storage、Session Storage、IndexedDB、Cookies 的使用方式、使用場景以及它們之間的區別。

2. Web Storage

（1）概述

HTML5 引入了 Web Storage，這使得在瀏覽器中存儲和檢索數據變得更加容易。Web Storage API 為客戶端瀏覽器提供了安全存儲和輕松訪問鍵值對的機制。Web Storage 提供了兩個 API 來獲取和設置純字符串的鍵值對：

localStorage：用于存儲持久數據，除非用戶手動將其從瀏覽器中刪除，否則數據將終身存儲。即使用戶關閉窗口或選項卡，它也不會過期；
sessionStorage：用于存儲臨時會話數據，頁面重新加載后仍然存在，關閉瀏覽器選項卡時數據丟失。

（2）方法和屬性

Web Storage API 由 4 個方法 setItem()、getItem()、removeItem() 、clear()、key()和一個 length 屬性組成，以 localStorage 為例：

setItem() ：用于存儲數據，它有兩個參數，即key和value。使用形式：localStorage.setItem(key, value)；
getItem()：用于檢索數據，它接受一個參數 key，即需要訪問其值得鍵。使用形式：localStorage.getItem(key);
removeItem()：用于刪除數據，它接受一個參數 key，即需要刪除其值得鍵。使用形式：localStorage.removeItem(key);
clear() ：用于清除其中存儲的所有數據，使用形式：localStorage.clear();
key()：該方法用于獲取 localStorage 中數據的所有key，它接受一個數字作為參數，該數字可以是 localStorage 項的索引位置。

console.log(typeof window.localStorage) // Object

// 存儲數據
localStorage.setItem("colorMode", "dark")
localStorage.setItem("username", "zhangsan")
localStorage.setItem("favColor", "green")

console.log(localStorage.length) // 3

// 檢索數據
console.log(localStorage.getItem("colorMode")) // dark

// 移除數據
localStorage.removeItem("colorMode")
console.log(localStorage.length) // 2
console.log(localStorage.getItem("colorMode")) // null

// 檢索鍵名
window.localStorage.key(0); // favColor

// 清空本地存儲
localStorage.clear()
console.log(localStorage.length) // 0

localStorage 和 sessionStorage 都非常適合緩存非敏感應用數據。可以在需要存儲少量簡單值并不經常訪問它們是使用它們。它們本質上都是同步的，并且會阻塞主 UI 線程，所以應該謹慎使用。

（3）存儲事件

我們可以在瀏覽器上監聽 localStorage 和 sessionStorage 的存儲變化。storage 事件在創建、刪除或更新項目時觸發。偵聽器函數在事件中傳遞，具有以下屬性：

newValue：當在存儲中創建或更新項目時傳遞給 setItem() 的值。當從存儲中刪除項目時，此值設置為 null。
oldValue：創建新項目時，如果該鍵存在于存儲中，則該項目的先前的值。
key：正在更改的項目的鍵，如果調用 .clear()，則值為 null。
url：執行存儲操作的 URL。
storageArea：執行操作的存儲對象（localStorage 或 sessionStorage）。

通常，我們可以使用 window.addEventListener("storage", func) 或使用 onstorage 屬性（如 window.onstorage=func）來監聽 storage 事件：

window.addEventListener('storage', e=> {
  console.log(e.key);
  console.log(e.oldValu);
  console.log(e.newValue);
});

window.onstorage=e=> {
  console.log(e.key);
  console.log(e.oldValu);
  console.log(e.newValue);
});

注意，該功能不會在發生更改的同一瀏覽器選項卡上觸發，而是由同一域的其他打開的選項卡或窗口觸發。此功能用于同步同一域的所有瀏覽器選項卡/窗口上的數據。因此，要對此進行測試，需要打開同一域的另一個選項卡。

（4）存儲限制

localStorage 和 sessionStorage 只能存儲 5 MB 的數據，因此需要確保存儲的數據不會超過此限制。

localStorage.setItem('a', Array(1024 * 1024 * 5).join('a'))
localStorage.setItem('b', 'a')

// Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of `a` exceeded the quota.

在上面的例子中，收到了一個錯誤，首先創建了一個5MB的大字符串，當再添加其他數據時就報錯了。

另外，localStorage 和 sessionStorage 只接受字符串。可以通過 JSON.stringify 和 JSON.parse 來解決這個問題：

const user={
  name : "zhangsan",
  age : 28,
  gender : "male",
  profession : "lawyer" 
};

localStorage.setItem("user", JSON.stringify(user));
localStorage.getItem("user");   // '{"name":"zhangsan","age":28,"gender":"male","profession":"lawyer"}'
JSON.parse(localStorage.getItem("user"))  // {name: 'zhangsan', age: 28, gender: 'male', profession: 'lawyer'}

如果我們直接將一個對象存儲在 localStorage 中，那將會在存儲之前進行隱式類型轉換，將對象轉換為字符串，再進行存儲：

const user={
  name : "zhangsan",
  age : 28,
  gender : "male",
  profession : "lawyer" 
};

localStorage.setItem("user", user);
localStorage.getItem("user");  // '[object Object]'

Web Storage 使用了同源策略，也就是說，存儲的數據只能在同一來源上可用。如果域和子域相同，則可以從不同的選項卡訪問 localStorage 數據，而無法訪問 sessionStorage 數據，即使它是完全相同的頁面。

另外：

無法在 web worker 或 service worker 中訪問 Web Storage；
如果瀏覽器設置為隱私模式，將無法讀取到 Web Storage；
Web Storage 很容易被 XSS 攻擊，敏感信息不應存儲在本地存儲中；
它是同步的，這意味著所有操作都是一次一個。對于復雜應用，它會減慢應用的運行時間。

（5）示例

下面來看一個使用 localStorage 的簡單示例，使用 localStorage 來存儲用戶偏好：

<input type="checkbox" id="darkTheme" name="darkTheme" onclick='onChange(this);'>
<label for="darkTheme">黑暗模式</label><br>

html {
  background: white;
}

.dark {
  background: black;
  color: white;
}

function toggle(on) {
  if (on) {
    document.documentElement.classList.add('dark'); 
  } else {
    document.documentElement.classList.remove('dark');    
  }
}

function save(on) {
  localStorage.setItem('darkTheme', on.toString());
}

function load() {
  return localStorage.getItem('darkTheme')==='true';
}

function onChange(checkbox) {
  const value=checkbox.checked;
  toggle(value);
  save(value);
}

const initialValue=load();
toggle(initialValue);
document.querySelector('#darkTheme').checked=initialValue;

這里的代碼很簡單，頁面上有一個單選框，選中按鈕時將頁面切換為黑暗模式，并將這個配置存儲在 localStorage 中。當下一次再初始頁面時，獲取 localStorage 中的主題設置。

3. Cookie

（1）Cookie 概述

Cookie 主要用于身份驗證和用戶數據持久性。Cookie 與請求一起發送到服務器，并在響應時發送到客戶端；因此，cookies 數據在每次請求時都會與服務器交換。服務器可以使用 cookie 數據向用戶發送個性化內容。嚴格來說，cookie 并不是客戶端存儲方式，因為服務器和瀏覽器都可以修改數據。它是唯一可以在一段時間后自動使數據過期的方式。

每個 HTTP 請求和響應都會發送 cookie 數據。存儲過多的數據會使 HTTP 請求更加冗長，從而使應用比預期更慢：

瀏覽器限制 cookie 的大小最大為4kb，特定域允許的 cookie 數量為 20 個，并且只能包含字符串；
cookie 的操作是同步的；
不能通過 web workers 來訪問，但可以通過全局 window 對象訪問。

Cookie 通常用于會話管理、個性化以及跨網站跟蹤用戶行為。我們可以通過服務端和客戶端設置和訪問 cookie。Cookie 還具有各種屬性，這些屬性決定了在何處以及如何訪問和修改它們，

Cookie 分為兩種類型：

會話 Cookie：沒有指定 Expires 或 Max-Age 等屬性，因此在關閉瀏覽器時會被刪除；
持久性 Cookie：指定 Expires 或 Max-Age 屬性。這些 cookie 在關閉瀏覽器時不會過期，但會在特定日期 (Expires) 或時間長度 (Max-Age) 后過期。

（2）Cookie 操作

下面先來看看如何訪問和操作客戶端和服務器上的 cookie。

① 客戶端（瀏覽器）

客戶端 JavaScript 可以通過 document.cookie 來讀取當前位置可訪問的所有 cookie。它提供了一個字符串，其中包含一個以分號分隔的 cookie 列表，使用 key=value 格式。

document.cookie;

可以看到，在語雀主頁中獲取 cookie，結果中包含了登錄的 cookie、語言、當前主題等。

同樣，可以使用 document.cookie 來設置 cookie 的值，設置cookie也是用key=value格式的字符串，屬性用分號隔開：

document.cookie="hello=world; domain=example.com; Secure";

這里用到了兩個屬性 SameSite 和 Secure，下面會介紹。如果已經存在同名的 cookie 屬性，就會更新已有的屬性值，如果不存在，就會創建一個新的 key=value。

如果需要經常在客戶端處理 Cookie，建議使用像 js-cookie 這樣的庫來處理客戶端 cookie：

Cookies.set('hello', 'world', { domain: 'example.com', secure: true });
Cookies.get('hello'); // -> world

這樣不僅為 cookie 上的 CRUD 操作提供了一個干凈的 API，而且還支持 TypeScript，從而幫助避免屬性的拼寫錯誤。

② 服務端（Node.js）

服務端可以通過 HTTP 請求的請求頭和響應頭來訪問和修改 cookie。每當瀏覽器向服務端發送 HTTP 請求時，它都會使用 cookie 頭將所有相關 cookie 都附加到該站點。請求標頭是一個分號分隔的字符串。

這樣就可以從請求頭中讀取這些 cookie。如果在服務端使用 Node.js，可以像下面這樣從請求對象中讀取它們，將獲得以分號分隔的 key=value 對：

http.createServer(function (request, response) {
    const cookies=request.headers.cookie;
    // "cookie1=value1; cookie2=value2"
    ...
}).listen(8124);

如果想要設置 cookie，可以在響應頭中添加 Set-Cookie 頭，其中 cookie 采用 key=value 的格式，屬性用分號分隔：

response.writeHead(200, {
    'Set-Cookie': 'mycookie=test; domain=example.com; Secure'
});

通常我們不會直接編寫 Node.js，而是與 ExpressJS 這樣的 Node.js 框架一起使用。使用 Express 可以更輕松地訪問和修改 cookie。只需添加一個像 cookie-parser 這樣的中間件，就可以通過 req.cookies 以 JavaScript 對象的形式獲得所有的 cookie。還可以使用 Express 內置的 res.cookie() 方法來設置 cookie：

const express=require('express')
const cookieParser=require('cookie-parser')
    
const app=express()
app.use(cookieParser())
    
app.get('/', function (req, res) {
    console.log('Cookies: ', req.cookies)
    // Cookies: { cookie1: 'value1', cookie2: 'value2' }

    res.cookie('name', 'tobi', { domain: 'example.com', secure: true })
})
    
app.listen(8080)

（3）Cookie 屬性

下面來深入了解 cookie 的屬性。除了名稱和值之外，cookie 還具有控制很多方面的屬性，包括安全方面、生命周期以及它們在瀏覽器中的訪問位置和方式等。

① Domain

Domain 屬性告訴瀏覽器允許哪些主機訪問 cookie。如果未指定，則默認為設置 cookie 的同一主機。因此，當使用客戶端 JavaScript 訪問 cookie 時，只能訪問與 URL 域相同的 cookie。同樣，只有與 HTTP 請求的域共享相同域的 cookie 可以與請求頭一起發送到服務端。

注意，擁有此屬性并不意味著可以為任何域設置 cookie，因為這顯然會帶來巨大的安全風險。此屬性存在的唯一原因就是減少域的限制并使 cookie 在子域上可訪問。例如，如果當前的域是 abc.xyz.com，并且在設置 cookie 時如果不指定 Domain 屬性，則默認為 abc.xyz.com，并且 cookie 將僅限于該域。但是，可能希望相同的 cookie 也可用于其他子域，因此可以設置 Domain=xyz.com 以使其可用于其他子域，如 def.xyz.com 和主域 xyz.com。

② Path

此屬性指定訪問 cookie 必須存在的請求 URL 中的路徑。除了將 cookie 限制到域之外，還可以通過路徑來限制它。路徑屬性為 Path=/store 的 cookie 只能在路徑 /store 及其子路徑 /store/cart、/store/gadgets 等上訪問。

③ Expires/Max-size

該屬性用來設置 cookie 的過期時間。若設置其值為一個時間，那么當到達此時間后，cookie 就會失效。不設置的話默認值是 Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標簽頁) 后，cookie 就會失效。

除此之外，它還可以通過將過期日期設置為過去來刪除 cookie。

④ Secure

具有 Secure 屬性的 cookie 僅可以通過安全的 HTTPS 協議發送到服務器，而不會通過 HTTP 協議。這有助于通過使 cookie 無法通過不安全的連接訪問來防止中間人攻擊。除非網站實用不安全的 HTTP 連接，否則應該始終將此屬性與所有 cookie 一起使用。

⑤ HTTPOnly

此屬性使 cookie 只能通過服務端訪問。因此，只有服務斷可以通過響應頭設置它們，然后瀏覽器會將它們與每個后續請求的頭一起發送到服務器，并且它們將無法通過客戶端 JavaScript 訪問。

這可以在一定程度上幫助保護帶有敏感信息（如身份驗證 token）的 cookie 免受 XSS 攻擊，因為任何客戶端腳本都無法讀取 cookie。但這并不意味著可以完全免受 XSS 攻擊。因為，如果攻擊者可以在網站上執行第三方腳本，那可能無法訪問 cookie，相反，他們可以直接向服務端執行相關的 API 請求。因此，想象一下用戶訪問了一個頁面，黑客在網站上注入了惡意腳本。他們可以使用該腳本執行任何 API，并在他們不知道的情況下代表用戶執行操作。

（4）Cookie 工具庫

① Js Cookie（JavaScript）

Js Cookie 是一個簡單、輕量級的 JavaScript API，用于處理瀏覽器 cookie。其支持 AMD、CommonJS 和 ES 模塊、沒有依賴關系、經過徹底測試、支持自定義編碼和解碼、通用瀏覽器支持。

安裝：

npm i js-cookie

使用：

// 設置 Cookie
Cookies.set('cookie-name', 'cookie-value', { expires: 14})

// 讀取 Cookie
Cookies.get('cookie-name')

// 刪除 Cookie
Cookies.remove('cookie-name')

② React Cookie（React）

React Cookie 是一個專門用于 React 的 cookie 庫，它繼承了 Universal Cookie 庫的功能。它提供了一組組件和 Hooks，使 React 中的 cookie 處理非常簡單。如果使用的是 React 16.8+ 版本，就可以使用 hooks 來處理 cookie。否則，必須使用其提供的組件。

安裝：

npm i react-cookie

React Cookie 提供了 3 個 Hook，分別是 cookie、setCookie 和 removeCookie。可以使用這些 Hook 來處理 React 應用中的 cookie。

const [cookies, setCookie, removeCookie]=useCookies(['cookie-name']);
// 設置 Cookie
setCookie(name, value, [options]);
// 刪除 Cookie
removeCookie(name, [options])

③ Cookies（Node.js）

Cookies 是用于 HTTP cookie 配置的流行 NodeJS 模塊之一。可以輕松地將其與內置的 NodeJS HTTP 庫集成或將其用作 Express 中間件。它允許使用 Keygrip 對 cookie 進行簽名以防止篡改、支持延遲 cookie 驗證、不允許通過不安全的套接字發送安全 cookie、允許其他庫在不知道簽名機制的情況下訪問 cookie。

安裝：

npm install cookies

使用：

const cookie=require('cookie');
cookies=new Cookies( request, response, [ options ] )

// 讀取 cookies
cookies.get( name, [ options ] )

// 設置 cookies
cookies.set( name, [ value ], [ options ] )

4. IndexedDB

（1）概述

IndexedDB 提供了一個類似 NoSQL 的 key/value 數據庫，它可以存儲大量結構化數據，甚至是文件和 blob。每個域至少有 1GB 的可用空間，并且最多可以達到剩余磁盤空間的 60%。

IndexedDB 于 2011 年首次實現，并于 2015 年 1 月成為 W3C 標準，它具有良好的瀏覽器支持：

key/value 數據庫意味著存儲的所有數據都必須分配給一個 key。它將key 與 value 相關聯，key 用作該值的唯一標識符，這意味著可以使用該 key 跟蹤該值。如果應用需要不斷獲取數據，key/value 數據庫使用非常高效且緊湊的索引結構來快速可靠地通過 key 定位值。使用該 key，不僅可以檢索存儲的值，還可以刪除、更新和替換該值。

在說 IndexedDB 之前，先來看一些相關術語：

數據庫： 一個域可以創建任意數量的 IndexedDB 數據庫，只有同一域內的頁面才能訪問數據庫。
object store：相關數據項的 key/value 存儲。它類似于 MongoDB 中的集合或關系數據庫中的表。
key：用于引用 object store 中每條記錄（值）的唯一名稱。它可以使用自動增量數字生成，也可以設置為記錄中的任何唯一值。
index：在 object store 中組織數據的另一種方式。搜索查詢只能檢查 key 或 index。
schema：object store、key 和 index 的定義。
version：分配給 schema 的版本號（整數）。IndexedDB 提供自動版本控制，因此可以將數據庫更新到最新 schema。
操作：數據庫活動，例如創建、讀取、更新或刪除記錄。

（2）特點及使用場景

indexedDB 特點如下：

可以將任何 JavaScript 類型的數據存儲為鍵值對，例如對象（blob、文件）或數組等。
IndexedDB API 是異步的，不會在數據加載時停止頁面的渲染。
可以存儲結構化數據，例如 Date、視頻、圖像對象等。
支持數據庫事務和版本控制。
可以存儲大量數據。
可以在大量數據中快速定位/搜索數據。
數據庫是域專用的，因此任何其他站點都無法訪問其他網站的 IndexedDB 存儲，這也稱為同源策略。

IndexedDB 使用場景：

存儲用戶生成的內容： 例如表單，在填寫表單的過程中，用戶可以離開并稍后再回來完成表單，存儲之后就不會丟失初始輸入的數據。
存儲應用狀態： 當用戶首次加載網站或應用時，可以使用 IndexedDB 存儲這些初始狀態。可以是登錄身份驗證、API 請求或呈現 UI 之前所需的任何其他狀態。因此，當用戶下次訪問該站點時，加載速度會增加，因為應用已經存儲了狀態，這意味著它可以更快地呈現 UI。
對于離線工作的應用： 用戶可以在應用離線時編輯和添加數據。當應用程序來連接時，IndexedDB 將處理并清空同步隊列中的這些操作。

（3）IndexedDB 操作

不同瀏覽器的 IndexedDB 可能使用不同的名稱。可以使用以下方法檢查 IndexedDB 支持：

const indexedDB=window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB ||
  window.shimIndexedDB;

if (!indexedDB) {
  console.log("不支持 IndexedDB");
}

可以使用 indexedDB.open() 來連接數據庫：

const dbOpen=indexedDB.open('performance', 1);

indexedDB.open 的第一個參數是數據庫名稱，第二個參數是可選的版本整數。

可以使用以下三個事件處理函數監聽 indexedDB 的連接狀態：

① onerror

在無法建立 IndexedDB 連接時，將觸發該事件：

// 連接失敗
dbOpen.onerror=e=> {
  reject(`IndexedDB error: ${ e.target.errorCode }`);
};

如果在無痕模式、隱私模式下運行瀏覽器，可能不支持 IndexedDB，需要禁用這些模式。

② onupgradeneeded

一旦數據庫連接打開，就會觸發 onupgradeneeded 事件，該事件可用于創建 object store。

dbOpen.onupgradeneeded=e=> {
   const db=dbOpen.result;

   // 創建 object store
   const store=db.createObjectStore("cars", { keyPath: "id" });
   // 使用自動遞增的id
   // const store=db.createObjectStore('cars', { autoIncrement: true }); 

   // 創建索引
   
   store.createIndex("cars_colour", ["colour"], { 
       unique: true 
   }); 

   // 創建復合索引
   store.createIndex("colour_and_make", ["colour", "make"], {
    unique: false,
  });
};

IndexedDB 使用了 object store 的概念，其本質上是數據集合的名稱。可以在單個數據庫中創建任意數量的 object store。keyPath是 IndexedDB 將用來識別對象字段名稱，通常是一個唯一的編號，也可以通過 autoIncrement: true 來自動為 store 設置唯一遞增的 ID。除了普通的索引，還可以創建復合索引，使用多個關鍵詞的組合進行查詢。

③ onsuccess

在連接建立并且所有升級都完成時，將觸發該事件。上面我們已經新建了 schema，接下來就可以在onsuccess 中添加、查詢數據。

// 連接成功
dbOpen.onsuccess=()=> {
  this.db=dbOpen.result;

  //1
  const transaction=db.transaction("cars", "readwrite");
  
  //2
  const store=transaction.objectStore("cars");
  const colourIndex=store.index("cars_colour");
  const makeModelIndex=store.index("colour_and_make");

  //3
  store.put({ id: 1, colour: "Red", make: "Toyota" });
  store.put({ id: 2, colour: "Red", make: "Kia" });
  store.put({ id: 3, colour: "Blue", make: "Honda" });
  store.put({ id: 4, colour: "Silver", make: "Subaru" });

  //4
  const idQuery=store.get(4);
  const colourQuery=colourIndex.getAll(["Red"]);
  const colourMakeQuery=makeModelIndex.get(["Blue", "Honda"]);

  // 5
  idQuery.onsuccess=function () {
    console.log('idQuery', idQuery.result);
  };
  colourQuery.onsuccess=function () {
    console.log('colourQuery', colourQuery.result);
  };
  colourMakeQuery.onsuccess=function () {
    console.log('colourMakeQuery', colourMakeQuery.result);
  };

  // 6
  transaction.oncomplete=function () {
    db.close();
  };
};

這里總共有六部分：

為了對數據庫執行操作，我們必須創建一個 schema，一個 schema 可以是單個操作，也可以是多個必須全部成功的操作，否則都不會成功；
這里用來獲取 cars object store 的引用以及對應的索引；
object store 上的 put 方法用于將數據添加到數據庫中；
這里就是數據的查詢，可以使用 keyPath 的值直接查詢項目（第14行）；第15行中的 getAll 方法將返回一個包含它找到的每個結果的數組，我們正在根據 cars_colour 索引來搜索 Red，應該會查找到兩個結果。第16行根據復合索引查找顏色為Blue，并且品牌為 Honda 的結果。
搜索成功的事件處理函數，它們將在查詢完成時觸發。
最后，在事務完成時關閉與數據庫連接。無需使用 IndexedDB 手動觸發事務，它會自行運行。

運行上面的代碼，就會得到以下結果：

可以在 Chrome Devtools 中查看：

下面來看看如何更新和刪除數據。

更新： 首先使用個 get 來獲取需要更新的數據，然后使用 store 上的 put 方法更新現有數據。put 是一種“插入或更新”方法，它要么覆蓋現有數據，要么在新數據不存在時插入新數據。

const subaru=store.get(4);

subaru.onsuccess=function () {
  subaru.result.colour="Green";
  store.put(subaru.result);
}

這會將數據庫中 Silver 色的 Subaru 的顏色更新為綠色。

刪除：可以使用 delete API 來刪除數據，最簡單的方法是通過其 key 來刪除：

const deleteCar=store.delete(1);

deleteCar.onsuccess=function () {
  console.log("Removed");
};

如果不知道 key 并且希望根據值來刪除，可以這樣：

const redCarKey=colourIndex.getKey(["Red"]);

redCarKey.onsuccess=function () {
  const deleteCar=store.delete(redCarKey.result);

  deleteCar.onsuccess=function () {
    console.log("Removed");
  };
};

結果如下：

5. 存儲空間分析

可以使用基于 Promise 的 Storage API 檢查 Web Storage、IndexedDB 和 Cache API 的剩余空間。異步 .estimate() 方法返回：

quota 屬性：可用的空間；
usage 屬性：已用的空間。

(async ()=> {
  if (!navigator.storage) return;

  const storage=await navigator.storage.estimate();

  console.log(`可用大小: ${ storage.quota / 1024 } Kb`);
  console.log(`已用大小: ${ storage.usage / 1024 } Kb`);
  console.log(`已用占比: ${ Math.round((storage.usage / storage.quota) * 100) }%`);
  console.log(`剩余大小: ${ Math.floor((storage.quota - storage.usage) / 1024) } Kb`);
})();

Storage API 的瀏覽器兼容性如下：

言

本篇文章主要介紹了前端HTML5幾種存儲方式的總結，主要包括本地存儲localstorage，本地存儲sessionstorage，離線緩存（application cache），Web SQL，IndexedDB。有興趣的可以了解一下。

正文開始~

總體情況

h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。

主要應用：購物車、客戶登錄

對于IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。

目標

解決4k的大小問題
解決請求頭常帶存儲信息的問題
解決關系型存儲的問題
跨瀏覽器

1.本地存儲localstorage

存儲方式：

以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。

大小：

每個域名5M

支持情況：

注意：IE9 localStorage不支持本地文件，需要將項目署到服務器，才可以支持！

if(window.localStorage){ 
 alert('This browser supports localStorage'); 
}else{ 
 alert('This browser does NOT support localStorage'); 
}

常用的API：

getItem //取記錄

setIten//設置記錄

removeItem//移除記錄

key//取key所對應的值

clear//清除記錄

存儲的內容：

數組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內容都可以存儲）

2.本地存儲sessionstorage

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在于 sessionStorage 在關閉頁面后即被清空，而 localStorage 則會一直保存。

3.離線緩存（application cache）

本地緩存應用所需的文件

使用方法：

①配置manifest文件

頁面上：

<!DOCTYPE HTML> 
<html manifest="demo.appcache"> 
... 
</html>

Manifest 文件：

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分為三個部分：

①CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存

②NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存

③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

完整demo：

CACHE MANIFEST 
# 2016-07-24 v1.0.0 
/theme.css 
/main.js 
 
NETWORK: 
login.jsp 
 
FALLBACK: 
/html/ /offline.html

服務器上：manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。

如Tomcat:

<mime-mapping> 
 <extension>manifest</extension> 
 <mime-type>text/cache-manifest</mime-type> 
</mime-mapping>

常用API：

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0（UNCACHED） : 無緩存，即沒有與頁面相關的應用緩存

1（IDLE） : 閑置，即應用緩存未得到更新

2 （CHECKING） : 檢查中，即正在下載描述文件并檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢

5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存

相關的事件：

表示應用緩存狀態的改變：

checking : 在瀏覽器為應用緩存查找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程中持續不斷地下載地觸發

updateready : 在頁面新的應用緩存下載完畢觸發

cached : 在應用緩存完整可用時觸發

Application Cache的三個優勢：

① 離線瀏覽

② 提升頁面載入速度

③ 降低服務器壓力

注意事項：

1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）

2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存

3. 引用manifest的html必須與manifest文件同源，在同一個域下

4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。

5. manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面

6. FALLBACK中的資源必須和manifest文件同源

7. 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。

8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問

9. 當manifest文件發生改變時，資源請求本身也會觸發更新

離線緩存與傳統瀏覽器緩存區別：

1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件

2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行

3. 離線緩存可以主動通知瀏覽器更新資源

4.Web SQL

關系數據庫，通過SQL語句訪問

Web SQL 數據庫 API 并不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端數據庫的 APIs。

支持情況：

Web SQL 數據庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法：

①openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。

②transaction：這個方法讓我們能夠控制一個事務，以及基于這種情況執行提交或者回滾。

③executeSql：這個方法用于執行實際的 SQL 查詢。

打開數據庫：

var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn); 
//openDatabase() 方法對應的五個參數分別為：數據庫名稱、版本號、描述文本、數據庫大小、創建回調

執行查詢操作：

var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
db.transaction(function (tx) { 
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)'); 
});

插入數據：　

var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
db.transaction(function (tx) { 
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)'); 
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")'); 
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")'); 
});

讀取數據：

db.transaction(function (tx) { 
 tx.executeSql('SELECT * FROM WIN', [], function (tx, results) { 
 var len=results.rows.length, i; 
 msg="<p>查詢記錄條數: " + len + "</p>"; 
 document.querySelector('#status').innerHTML +=msg; 
 for (i=0; i < len; i++){ 
 alert(results.rows.item(i).name ); 
 } 
 }, null); 
});

由這些操作可以看出，基本上都是用SQL語句進行數據庫的相關操作，如果你會MySQL的話，這個應該比較容易用。

5.IndexedDB

索引數據庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助于本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。

異步API：

在IndexedDB大部分操作并不是我們常用的調用方法，返回結果的模式，而是請求——響應的模式，比如打開數據庫的操作

這樣，我們打開數據庫的時候，實質上返回了一個DB對象，而這個對象就在result中。由上圖可以看出，除了result之外。還有幾個重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請求打開的數據庫的版本號和已經存在的數據庫版本號不一致的時候調用）。這就類似于我們的ajax請求那樣。我們發起了這個請求之后并不能確定它什么時候才請求成功，所以需要在回調中處理一些邏輯。

關閉與刪除：

function closeDB(db){ 
 db.close(); 
} 
 
function deleteDB(name){ 
 indexedDB.deleteDatabase(name); 
}

數據存儲：

indexedDB中沒有表的概念，而是objectStore，一個數據庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當于一張表，里面存儲的每條數據和一個鍵相關聯。

我們可以使用每條記錄中的某個指定字段作為鍵值（keyPath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異。

天下數據是國內屈指可數的擁有多處海外自建機房的新型IDC服務商，被業界公認為“中國IDC行業首選品牌”。

天下數據與全球近120多個國家頂級機房直接合作，提供包括香港、美國、韓國、日本、臺灣、新加坡、荷蘭、法國、英國、德國、埃及、南非、巴西、印度、越南等國家和地區的服務器、云服務器的租用服務，需要的請聯系天下數據客服！

除提供傳統的IDC產品外，天下數據的主要職責是為大中型企業提供更精細、安全、滿足個性需求的定制化服務器解決方案，特別是在直銷、金融、視頻、流媒體、游戲、電子商務、區塊鏈、快消、物聯網、大數據等諸多行業，為廣大客戶解決服務器租用中遇到的各種問題。

在線咨詢

上一篇：熱熔劃線干貨知識分享，一般人我不告訴他
下一篇：標簽ul與css樣式實現菜單特效實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何直接在網頁上做筆記并保存到Onenote？

用OneNoteClipper剪輯網頁

將網頁發送至OneNote

1. 概述

2. Web Storage

（1）概述

（2）方法和屬性

（3）存儲事件

（4）存儲限制

（5）示例

3. Cookie

（1）Cookie 概述

（2）Cookie 操作

① 客戶端（瀏覽器）

② 服務端（Node.js）

（3）Cookie 屬性

① Domain

② Path

③ Expires/Max-size

④ Secure

⑤ HTTPOnly

（4）Cookie 工具庫

① Js Cookie（JavaScript）

② React Cookie（React）

③ Cookies（Node.js）

4. IndexedDB

（1）概述

（2）特點及使用場景

（3）IndexedDB 操作

① onerror

② onupgradeneeded

③ onsuccess

5. 存儲空間分析

1.本地存儲localstorage

5.IndexedDB

您的項目需求