本地存儲簡介
- 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的
- web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲
- 解決了cookie存儲空間不足的問題（cookie的存儲空間爲4K）
- localStorage中一般瀏覽器支持的是5M大小，相當於一個5M大小的針對於前端頁面的數據庫
- HTML5本地存儲優於cookie
本地存儲提供了兩個在客戶端存儲數據的對象
localStorage：永久存儲：存儲沒有截止日期的數據；不管從哪個頁面打開，永久本地存儲的數據都在sessionStorage：臨時存儲：當頁面關閉後臨時本地存儲的數據會刪除；臨時本地存儲只對當前頁面有效，獲取不到其他頁面創建的臨時本地存儲；從創建臨時本地存儲頁面跳轉到其他頁面，臨時本地存儲的數據會傳到跳轉的頁面；臨時本地存儲多用來頁面間傳值
創建和獲取本地存儲
方式一：使用方法創建和獲取
-
創建語法：
對象.setItem(“存儲名稱”, “值”); -
獲取語法：
對象.getItem(“存儲名稱”); -
注意：存儲名稱和值始終是字符串
<script>
// 方式一：使用方法進行創建和獲取
// 創建語法：對象.setItem("存儲名稱", "值");
// 注意：存儲名稱和值始終是字符串
sessionStorage.setItem("uname", "苦澀");
// 獲取語法：對象.getItem("存儲名稱");
var uname = sessionStorage.getItem("uname");
alert(uname);
</script>
方式二：使用屬性創建和獲取
- 創建語法：
對象.存儲名稱 = “值”; - 獲取語法：
對象.存儲名稱
<script>
// 方式二：使用屬性創建和獲取
// 創建語法：對象.存儲名稱 = "值";
localStorage.uname = "苦澀";
// 獲取語法：對象.存儲名稱
var uname = localStorage.uname;
alert(uname);
</script>
創建和獲取多條本地存儲
-
JSON.stringify()：將對象轉成JSON字符串 -
JSON.parse()：將JSON字符串轉成對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// -------------創建和獲取多條本地存儲--------------
// 1、第一步：把對象轉成JSON字符串進行創建本地存儲
// JSON.stringify()：轉換爲JSON字符串，通常爲對象或數組
localStorage.ren = JSON.stringify({uname : "苦澀", age : 18, sex : "男"});
// 2、第二步：把獲取到的本地存儲（JSON字符串）轉成對象
// JSON.parse(): 將JSON字符串轉成對象
var info = JSON.parse(localStorage.ren);
// console.log(info);
alert(info.uname);
</script>
</body>
</html>
修改和刪除本地存儲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">修改</button>
<button id="btn2">刪除數據</button>
<button id="btn3">刪除本地存儲</button>
<button id="btn4">刪除所有本地存儲</button>
<script>
// -------------修改和刪除本地存儲(臨時和永久都一樣操作)--------------
// 1、創建臨時本地存儲
sessionStorage.ks = "苦澀";
sessionStorage.nl = "18歲";
// 2、修改本地存儲的數據
document.getElementById("btn1").onclick = function(){
sessionStorage.nl = "20歲";
}
// 3、刪除本地存儲的數據，存儲的名稱會保留
document.getElementById("btn2").onclick = function(){
sessionStorage.ks = null;
}
// 4、刪除本地存儲的數據，存儲的名稱不會保留
document.getElementById("btn3").onclick = function(){
sessionStorage.removeItem("nl");
}
// 5、刪除所有本地存儲的數據，存儲的名稱不會保留
document.getElementById("btn4").onclick = function(){
sessionStorage.clear();
}
</script>
</body>
</html>
臨時本地存儲頁面傳值
從創建臨時本地存儲頁面跳轉到其他頁面，臨時本地存儲的數據會傳到跳轉的頁面
臨時本地存儲多用來頁面間傳值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<a href="./test.html">跳轉到2頁面</a>
<button id="btn1">跳轉到2頁面</button>
<script>
document.getElementById("btn1").onclick = function(){
window.location.href = "./test.html";
}
// -------------臨時本地存儲頁面傳值--------------
// 1、創建臨時本地存儲
sessionStorage.ks = "苦澀";
sessionStorage.nl = "18歲";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<button id="btn1">獲取</button>
<script>
// -------------臨時本地存儲頁面傳值--------------
document.getElementById("btn1").onclick = function(){
alert(sessionStorage.nl);
}
</script>
</body>
</html>
本地存儲練習
添加購物車，識別用戶是否登錄，用戶登錄信息過期時間
1.html、2.html、3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1號商品</title>
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
div{
margin-top: 50px; text-align: center;
}
</style>
</head>
<body>
<div id="user"></div>
<div>我是1號商品</div>
<div>
<button id="cart">加入購物車</button>
</div>
<script>
$(function(){
// 獲取當前時間，並保存
var nTime = parseInt(new Date().getTime()/1000);
var t = nTime-localStorage.userTime;
// 判斷瀏覽器是否有用戶信息
if(t < 60 && localStorage.user){
// 獲取用戶信息
var user = JSON.parse(localStorage.user);
// 把用戶信息寫入頁面中
$("#user").text("歡迎：" + user.un + ", 您的ID：" + user.id);
}else{
localStorage.user = null;
}
$("#cart").click(function(){
// 驗證是否登錄了
if(user){
alert("執行加入購物車代碼");
}else{
// 保存當前網址：1.html
sessionStorage.prev = window.location.href;
// 當前頁面跳轉到登錄頁面
window.location.href = "./login.html";
}
})
})
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
div{
margin-top: 50px; text-align: center;
}
</style>
</head>
<body>
<div>我是登錄頁面</div>
<div>
用戶名：<input type="text" id="uname" placeholder="請輸入用戶名">
<br><br>
密碼：<input type="password" id="pwd">
<br><br>
<input type="submit" id="sbt" value="提交">
</div>
<script>
$(function(){
$("#sbt").click(function(){
// 1、獲取用戶名和密碼
var uname = $("#uname").val();
var pwd = $("#pwd").val();
// 2、服務器驗證
if(uname == "小新" && pwd == "123456"){
// 驗證通過執行的代碼
// 把用戶信息保存
localStorage.user = JSON.stringify({un:"小新", "id":001});
// 獲取登錄時間，並保存
localStorage.userTime = parseInt(new Date().getTime()/1000);
// 跳轉回原來的網址
window.location.href = sessionStorage.prev;
}else{
alert("用戶名或密碼不對");
}
})
})
</script>
</body>
</html>