本地存储提供了两个在客户端存储数据的对象
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>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>