Home >> Blog >> 如何以及何時使用 JavaScript 應用會話存儲 sessionstorage
如何以及何時使用 JavaScript 應用會話存儲
在瀏覽器上存儲數據時，會話存儲是一種流行的選擇。它使開發人員能夠保存和檢索不同的值。與本地存儲不同，會話存儲僅保留特定會話的數據。一旦用戶關閉瀏覽器窗口，數據就會被清除。
介紹
會話存儲是 cookie 的完美替代品。它的語法非常簡單。初學者可以輕鬆學習和實現這種存儲。會話存儲還可以容納大量數據。大多數瀏覽器，包括 Chrome 和 Firefox，可以在會話存儲中存儲大約 10 MB 的數據。
先決條件
要繼續學習，您必須對 HTML 和 JavaScript 有一些基本的了解。您還應該在計算機上安裝瀏覽器。
目標
演示如何在會話存儲中存儲、檢索、刪除和清除項目。
第 1 步 - 創建項目
首先，在桌面上創建一個新文件夾。在此文件夾中，創建index.html和main.js文件。然後，您可以在 Visual Studio Code 或您的首選編輯器中打開這些文件。
我們所有與對象相關的 JavaScript 函數sessionStorage都將在main.js文件中。然後我們將把這個文件導入到index.html.
第 2 步 - 了解會話存儲功能
在開始之前，了解會話存儲支持的不同方法很重要。你會發現 session storage 和 localStorage 有類似的方法。
它們是：setItem()、getItem()、removeItem()和clear()。
設置項（）
調用此方法將值存儲在會話存儲中。此方法將鍵和值作為參數。
sessionStorage.setItem("name:, "John Smith");;
在上面的函數中，name是鍵，John Smith而是值。
獲取項目（）
此函數用於從會話存儲中檢索值。它接受key作為參數。使用上面的例子，關鍵是name.
var user = sessionStorage.getItem("name");
除去項目（）
此方法還需要 akey作為參數。然後該方法將從會話存儲中刪除指定的項目。
sessionStorage.remove("name");
調用時，上述語句John Smith將從會話存儲中刪除。
清除（）
顧名思義，此函數從會話存儲中刪除所有項目。此方法不需要任何參數。
sessionStorage.clear();
讓我們在現實生活中的應用程序中實現會話存儲。
第 3 步 - 創建視圖
在這一步中，我們將設計一個簡單的網頁，用於與會話存儲功能進行交互。該頁面是使用 HTML5 設計的。該main.js文件必須在index.html文件中導入。
這使我們能夠訪問所需的會話存儲功能。請注意，我們將使用 Bootstrap 來設置網頁樣式。這是引導鏈接。
< link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" >
main.js我們使用下面的代碼片段導入文件。
< script type="text/javascript" src="main.js">< /script>
確保我們所有的按鈕都有一個id. main.js這是因為我們將在文件中處理他們的點擊事件。
< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="width=device-width">
< title>sessionStorage< /title>
< script type="text/javascript" src="main.js">< /script>
< link rel=" stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
< /head>
< body>
< div class="container" id="formDiv">
< form class="form-signin" id="carForm">
< h1>Enter details< /h1>
< label for="carBrand" class="sr-only">Car< /label>
< input type="text" id="carBrand" class="form-control" placeholder="Car brand" required autofocus>< br>
< label for="carPrice" class="sr-only">Price< /label>
< input type="text" id="carPrice" class="form-control" placeholder="Price" required>< br>
< button class="btn btn-lg btn-primary btn-block" type="submit">Submit< /button>
< /form>
< button class="btn btn-lg btn-primary btn-block" id="retrieveButton">Retrieve records < /button>
< div id="retrieve">< /div>
< button class="btn btn-lg btn-danger btn-block" id="removeButton">Remove record< /button>
< button class="btn btn-lg btn-danger btn-block" id="clearButton">Clear all records< /button>
< /div>
< /body>
< /html>
上面的網頁有四個按鈕，ids分別是removeButton、clearButton、retrieveButton和submit。
removeButton– 單擊時，此按鈕將調用文件removeItem中的函數main.js。
clearButton– 此按鈕調用clearStorage方法。
submit– 將值存儲或保存在sessionStorage.
clearButton– 刪除 中的所有項目sessionStorage。
所有這些函數都在main.js文件中定義。
將store()接受用戶輸入並將值setItem()作為參數傳遞給方法。結果，這些值或對象將存儲在會話存儲中。該store()方法的代碼包含在下面。
function store(){ //stores items in sessionStorage
var brand = document.getElementById('carBrand').value;
var price = document.getElementById('carPrice').value;
const car = {
brand: brand,
price: price,
}
window .sessionStorage. setItem( 'car',JSON.stringify(car));
//converting object to string
}
還main.js具有retrieveRecords()獲取. sessionStorage該功能概述如下。如前所述，這getItem()需要一個鍵來檢索特定的對像或值。
function retrieveRecords(){ //retrieves items in sessionStorage
console.log("retrive records");
var records = window.sessionStorage.getItem('car');
var paragraph = document.createElement("p");
var infor = document.createTextNode(records);
paragraph.append Child(infor);
var element = document.getElementById("retrieve");
element.appendChild(paragraph);
}
就像 一樣getItem()，該removeItem()方法需要一個密鑰。在此示例中，鍵是car.
function removeItem(){//deletes item from sessionStorage
sessionStorage.removeItem('car');
console.log("remove items");
}
clearStorage 函數在調用時將刪除會話存儲中的所有項目。
這是所需的代碼片段：
function clearStorage(){ //clears the entire sessionStorage
sessionStorage.clear();
console.log("clear records");
}
這是 main.js 文件中的完整代碼：
function store() { //stores items in the sessionStorage
var brand = document.getElementById('carBrand').value;
var price = document.getElementById('carPrice').value;
const car = {
brand: brand,
price: price,
}
window.sessionStorage.setItem('car',JSON.stringify(car));
//converting object to string
}
function retrieveRecords() { //retrieves items in the sessionStorage
console.log("retrive records");
var records = window.sessionStorage.getItem('car');
var paragraph = document.createElement("p");
var infor = document.createTextNode(records);
paragraph.appendChild(infor);
var element = document.getElementById("retrieve");
element.appendChild(paragraph);
}
function removeItem() {//deletes item from sessionStorage
sessionStorage.removeItem('car');
console.log("remove items");
}
function clearStorage() { //clears the entire sessionStorage
sessionStorage.clear();
console.log("clear records");
}
window.onload =function() { //ensures the page is loaded before functions are executed.
document.getElementById("carForm").onsubmit = store;
document.getElementById("clearButton").onclick = clearStorage;
document.getElementById("removeButton").onclick = removeItem;
document.getElementById("retrieveButton").onclick = retrieveRecords;
}
您可以按照以下代碼將列表存儲在會話存儲中：
function store() { //stores items in the local storage
var brand = document.getElementById('carBrand').value; //retrieves value
var price = document.getElementById('carPrice').value; //retrieve value
const car = {brand: brand,price: price}
var vehicles = [car]; // adding an object to list
window. sessionStorage. setItem('car',JSON.stringify(vehicles));
//converting the list to string. SessionStorage only stores values in Strings
}
結果
請注意，已存儲在會話存儲中的項目是car本教程中使用的對象。您可以按照下面的視頻來測試網頁。
何時使用會話存儲
會話存儲可用於檢查用戶的身份驗證狀態。登錄的用戶可以被重定向到主頁。另一方面，未註冊用戶被引導到身份驗證頁面。
會話存儲還有助於防止某些操作。例如，它有助於禁止某些用戶進行某些購買。開發人員還可以使用會話存儲來提高數據安全性。一旦用戶關閉瀏覽器選項卡，他們的所有數據都會被清除。這使得第三方很難獲得訪問權限。
結論
至此，您應該對會話存儲有了更好的了解。您應該考慮使用會話存儲來替代 cookie。因為它可以為開發人員提供極大的靈活性。