本地存储简介
- 在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>