localStorage和sessionStorage本地儲存 | 打卡每天一份勸退技能

阿新 • • 發佈：2021-02-19

技術標籤：達達前端指路

大家好，我是魔王哪吒，很高興認識你~~

哪吒人生信條：如果你所學的東西處於喜歡才會有強大的動力支撐。

每天學習程式設計，讓你離夢想更新一步，感謝不負每一份熱愛程式設計的程式設計師，不論知識點多麼奇葩，和我一起，讓那一顆四處流蕩的心定下來，一直走下去，加油，2021加油！歡迎關注加我vx:xiaoda0423，歡迎點贊、收藏和評論

不要害怕做夢，但是呢，也不要光做夢，要做一個實幹家，而不是空談家，求真力行。

前言

如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，接收好挑戰了嗎？文章公眾號首發，關注 程式設計師哆啦A夢 第一時間獲取最新的文章

筆芯❤️~

知識點

使用HTML5中的Web Storage API，可以在客戶端儲存更多的資料，，可以實現資料在多個頁面中共享甚至是同步，對於複雜的資料，可以使用 Web SQL Database API 來實現。

掌握 localStorage 和 sessionStorage 儲存方式，儲存 JSON 物件的資料，使用 Web SQL Database 的基本操作。

Web Storage

Web Storage API 的屬性，方法，事件。

cookie 可用於傳遞少量的資料，是一個在伺服器和客戶端之間來回傳送文字值的內建機制，伺服器可以根據 cookie 追蹤使用者在不同頁面的訪問資訊。

cookie 的特點：

第一，大小的限制，cookie 的大小限制在 4KB 以內。

第二，頻寬的限制，cookie 資料會在伺服器和瀏覽器之間來回傳送，所以訪問哪個頁面，都會消耗網路的頻寬。

第三，安全風險，因為 cookie 會頻繁在網路中傳送，所以在網路上是可見的，在不加密的情況下，是由安全風險的。

第四，操作複雜，在客戶端的瀏覽器中，使用 JavaScript 操作 cookie資料是比較複雜的。

所以，如果對於較小的資料，並且需要在伺服器和客戶端之間頻繁傳送時，才有 cookie 存在的意義。

什麼是 web storage

Web Storage 可以在客戶端儲存大量的資料，Web Storage

本地儲存的優勢：

第一，儲存容量大。

第二，零頻寬。Web Storage 中的資料僅僅儲存在本地，不會與伺服器發生任何互動行為，不存在網路頻寬的佔用問題。

第三，程式設計介面。提供了一套豐富的介面，使得資料操作更加方便。

第四，獨立的儲存空間。每個域都有獨立的儲存空間，各個儲存空間是完全能獨立的，不會造成資料的混亂。

localStorage 和 sessionStorage

在 Web Storage 本地儲存包括 sessionStorage 會話儲存和 localStorage 本地儲存。

cookie 和 session 完全是伺服器端可以操作的資料，sessionStorage 和 localStorage 完全是瀏覽器端操作的資料。

cookie 和 session 完全繼承同一個 Storage API, 所以 sessionStorage 和 localStorage 的程式設計介面是一樣的。

sessionStorage 和 locatlStorage 區別在於資料存在時間範圍 和 頁面範圍。

sessionStorage: 資料只儲存到儲存它的視窗或標籤關閉時，資料在構建它們的視窗或標籤內也可見

localStorage: 資料的生命週期比視窗或瀏覽器的生命週期長，資料可被同源的每個視窗或者標籤共享。

監測是否支援 Web Storage

示例：

function CheckStorageSupport() {
 // 監測 sessionStorage
 if(window.sessionStorage) {
  console.log(“瀏覽器支援sessionStorage”);
 }else{
  console.log("瀏覽器不支援sessionStorage");
 }
 
 // 監測localStorage
 if(window.localStorage) {
  console.log("瀏覽器支援localStorage");
 }else {
  console.log("瀏覽器不支援localStorage");
 }
}

設定和獲取Storage資料

儲存資料到sessionStorage：

window.sessionStorage.setItem("key”,"value");

setItem()表示儲存資料的方法

從sessionStorage中獲取資料：

value = window.sessionStorage.getItem("key");

getItem()為獲取資料的方法

儲存資料的寫法：

window.sessionStorage.key = "value";

或

window.sessionStorage["key"] = "value"

獲取資料的方法更加直接：

value = window.sessionStorage.key;

或

value = window.sessionStorage["key"]

使用sessionStorage 和 localStorage

示例：

function DaDa() {
 window.localStorage.setItem("localKey", "localVlaue");
 
 // 獲取
 console.log(window.localStorage.getItem("localKey"));
 
 window.sessionStorage.setItem("sessionKey", "sessionValue");
 
 // 獲取
 console.log(window.sessionStorage.getItem("sessionKey"));
}

Storage介面

示例：

interface Storage{
 readonly attribute unsigned long length;
 DOMString ? key(unsigned long index);
 getter DOMString getItem(DOMString key);
 setter creator void setItem(DOMString key, DOMString value);
 deleter void removeItem(DOMString key);
 void clear();
}

length屬性，表示當前storage物件中儲存的鍵/值對的數量。

Storage物件是同源的，length屬性只能反映同源的鍵/值對數量

key方法，獲取指定位置的鍵。
getItem方法，根據鍵返回相應的資料值。
setItem方法，將資料存入指定鍵對應的位置。
removeItem方法，從儲存物件中移除指定的鍵/值對。
clear方法，清除Storage物件中所有的資料，如Storage物件是空的，則不執行任何操作。

使用Storage物件儲存頁面的內容

示例：

// 儲存資料到sessionStorage

function SaveStorage(frm) {
 var storage = window.sessionStorage;
 
 storage.setItem("name",frm.name.value);
 
 storage.setItem("age", frm.age.value);
}

遍歷顯示sessionStorage中的資料

function Show(){
 var storage = window.sessionStorage
 var result = "";
 for(var i=0; i<storage.length; i++){
  var key = storage.key(i);
  var value = storage.getItem(key);
  result += key + ":" + value + ";";
 }
}

儲存JSON物件的資料

Storage 是以字串儲存資料的，所以在儲存 JSON 格式的資料之前，需要把 JSON 格式的資料轉化為字串，這個操作叫序列化。

使用JSON.stringify()序列化json格式的資料為字串資料:

var dada = JSON.stringify(jsonObject);

把資料反序列化為JSON格式：

var jsonObject = JSON.parse(stringData);

web Storage建立一套會在資料更新時觸發的事件通知機制，無論監聽的視窗是否儲存過該資料，只要與執行儲存的視窗是同源的，都會觸發web Storage事件。

window.addEventListener("storage", EventHandle, true);

StorageEvent事件介面：

interface StorageEvent:Event {
 readonly attribute DOMString key;
 readonly attribute DOMString ? oldValue;
 readonly attribute DOMString ? newValue;
 readonly attribute DOMString ? url;
 readonly attribute Storage? storageArea;
}

key屬性：包含了儲存總被更新或刪除的鍵；oldValue屬性：包含了更新前鍵對應的資料。

newValue屬性：包含了更新後的資料；url屬性：指向Storage事件的發生源。

storageArea屬性：該屬性是一個引用，指向值發生改變的localStorage或sessionStorage。

web SQL Database

Web SQL Database 使用的是 SQLite 資料庫，允許應用程式通過一個非同步的 JavaScript 介面訪問資料庫。SQLite是一款輕型的資料庫。

openDatabase() 方法，使用現有的資料庫或新建資料庫來建立資料庫物件。
transaction() 方法，允許設計者控制事務的提交或回滾。
executeSql() 方法，用於執行真實的SQL查詢。

操作Web sql資料庫

var db = openDatabase("TestDB", "1.0", "測試", xxxx)

共5個引數：

資料庫名
版本號
資料庫的描述
資料庫的大小
建立回撥函式

建立資料表

transaction()方法用於進行事務處理，executeSql()方法用於執行sql語句。

建立資料表：

db.transaction(function (tx) {
 tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');
});

transaction()方法傳遞給回撥函式的tx是一個transaction物件，使用transaction物件的executeSql()方法可以執行SQL語句。

新增資料到資料表：

db.transaction(function (tx){
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));
});

讀取資料庫中的資料：

db.transaction(function (tx){
 tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){
  var len = results.rows.length;
  for (var i=0; i<len; i++){
   console.log(results.rows.item(i).Name);
  }
 },null);
});

html5幾種儲存形式

本地儲存-localStorage, sessionStorage
離線快取 application cache
indexedDB 和 webSQL

localStorage 和 sessionStorage

localStorage永久儲存，永不失效除非手動刪除
sessionStorage瀏覽器重新開啟後就消失了

大小，每個域名是5M，cookie第一是由大小限制，大概4K左右，第二，ie6域名下有個數限制。

HTML API

在瀏覽器的API有兩個，localStorage和sessionStorage

window物件中：localStorage對應window.localStorage，sessionStorage對應window.sessionStorage。

localStorage只要在相同的協議、相同的主機名、相同的埠下，就能讀取或修改到同一份localStorage的資料。

sessionStorage比localStorage更嚴格，除了協議、主機名、埠外，還要求在同一視窗下

方法及含義：

setItem(‘key’,‘value’)	儲存資料

getItem(‘key’)	讀取資料

removeItem(‘key’)	刪除資料

clear()	清空資料

使用方法詳解：

//儲存資料
window.localstage.setItem('key','value')
// key : 資料的名稱
// value : 資料
// 所儲存的是資料必須是string型別

//讀取資料
window.localstage.getItem('key')
// key : 資料的名稱
// 如果資料不存在，返回null (一般用它做判斷)

//刪除資料
window.localstage.removeItem('key')
// key : 資料的名稱
// 刪除本地儲存中的指定資料

//清空資料
window.localstage.clear()
// 清空本地儲存中的所有資料

什麼是localStorage和sessionStorage？

localStorage(長期儲存)、sessionStorage(會話儲存)是H5中的本地web儲存提供的兩個介面, 相當於前端一個小型的本地資料庫，用於在本地儲存一些不敏感的資料，隸屬於window物件。

localStorage和sessionStorage的異同？

相同點:兩者的API完全相同，都是在瀏覽器端儲存資料。

不同點:

localStorage儲存的資料是永久性資料,頁面重新整理，即使瀏覽器重啟，甚至作業系統重啟也不會丟失，並且儲存的資料在同源（協議、域名、埠號一致）下的標籤頁和window視窗之間共享。
sessionStorage儲存的資料有些苛刻，頁面重新整理仍然有效,選項卡關閉時資料丟失。但是在相同標籤頁開啟的多個iframe之間資料可以共享(同源的情況下)。

兩者都是在瀏覽器端儲存資料,localStorage儲存的資料被限制在同源下,可跨視窗通訊,不可跨瀏覽器,跨域；sessionStorage儲存的資料被限制在標籤頁(頁卡關閉丟失)。

localStorage的侷限

侷限:

1.各個瀏覽器的支援的大小不一樣，業界認為是5M,並且在不同的瀏覽器不同版本支援度不一樣

2.localStorage的資料不能被爬蟲抓取

近期推薦

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一起學習了)

我們下期見！

文章持續更新，可以微信搜一搜「 程式設計師哆啦A夢 」第一時間閱讀，回覆【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

localStorage和sessionStorage本地儲存 | 打卡每天一份勸退技能

前言

知識點

Web Storage

什麼是 web storage

localStorage 和 sessionStorage

監測是否支援 Web Storage

設定和獲取Storage資料

使用sessionStorage 和 localStorage

Storage介面

使用Storage物件儲存頁面的內容

儲存JSON物件的資料

web SQL Database

操作Web sql資料庫

建立資料表

html5幾種儲存形式

localStorage 和 sessionStorage

HTML API

什麼是localStorage和sessionStorage？

localStorage和sessionStorage的異同？

localStorage的侷限

近期推薦

點贊、收藏和評論

我們下期見！

相關推薦