|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ // 本地存储 localStorage sessionStorage
|
|
|
+ // 这两种存储方法 空间为5MB及以上
|
|
|
+ // localStorage 本地存储，永久存储
|
|
|
+ // sessionStorage 会话存储，关闭浏览器后数据丢失
|
|
|
+
|
|
|
+ // localStorage sessionStorage 与 cookie 区别
|
|
|
+ // cookie 在本地存储，会携带到服务器端
|
|
|
+ // localStorage sessionStorage 是在客户端存储的，不会携带到服务器端
|
|
|
+ // cookie 可以设置过期时间，localStorage sessionStorage 不能设置过期时间
|
|
|
+ // 存储大小 cookie 4KB，localStorage sessionStorage 5MB及以上
|
|
|
+
|
|
|
+ // 操作方法
|
|
|
+ // localStorage.setItem() 存储数据
|
|
|
+ // localStorage.getItem() 获取数据
|
|
|
+ // localStorage.removeItem() 删除数据
|
|
|
+ // localStorage.clear() 清空所有数据
|
|
|
+ // sessionStorage.setItem() 存储数据
|
|
|
+ // sessionStorage.getItem() 获取数据
|
|
|
+ // sessionStorage.removeItem() 删除数据
|
|
|
+ // sessionStorage.clear() 清空所有数据
|
|
|
+
|
|
|
+
|
|
|
+ // 存储数据
|
|
|
+ localStorage.setItem("name","张三");
|
|
|
+ localStorage.setItem("age","18");
|
|
|
+
|
|
|
+ // 获取数据
|
|
|
+ console.log(localStorage.getItem("age"));
|
|
|
+
|
|
|
+ // 删除数据
|
|
|
+ // localStorage.removeItem("age");
|
|
|
+
|
|
|
+ // 清空数据
|
|
|
+ localStorage.clear();
|
|
|
+
|
|
|
+ // 会话存储 sessionStorage
|
|
|
+ sessionStorage.setItem("name","张三");
|
|
|
+ sessionStorage.setItem("age","18");
|
|
|
+ // 获取数据
|
|
|
+ console.log(sessionStorage.getItem("age"));
|
|
|
+ // 删除数据
|
|
|
+ // sessionStorage.removeItem("age");
|
|
|
+ // 清空数据
|
|
|
+ // sessionStorage.clear();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
