|
|
@@ -0,0 +1,50 @@
|
|
|
+<!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>
|
|
|
+ <button id="btn1">设置姓名</button>
|
|
|
+ <button id="btn2">获取姓名</button>
|
|
|
+ <button id="btn3">删除姓名</button>
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * webStorage:客户端：5MB+(5-10) 不随请求发服务器
|
|
|
+ * XSS可以获取
|
|
|
+ * localStorage(本地存储):
|
|
|
+ * 持久化：浏览器关闭 数据仍旧存在 除非手动删除或者清除缓存
|
|
|
+ * 同源共享：同端口 同域名 同协议 所有标签页共享
|
|
|
+ * sessionStorage(会话存储)
|
|
|
+ * 会话级：浏览器关闭 数据消失
|
|
|
+ * 标签页隔离：不同标签页 同源也看不到
|
|
|
+ * cookie：服务端:4KB
|
|
|
+ */
|
|
|
+ let btn1 = document.getElementById("btn1");
|
|
|
+ let btn2 = document.getElementById("btn2");
|
|
|
+ let btn3 = document.getElementById("btn3");
|
|
|
+
|
|
|
+ let obj2 = {
|
|
|
+ "name":"家家"
|
|
|
+ }
|
|
|
+ btn1.onclick = function() {
|
|
|
+ localStorage.setItem("name","Lucy");
|
|
|
+ localStorage.age = 18
|
|
|
+ localStorage["address"] = '哈尔滨'
|
|
|
+ localStorage.setItem('obj',JSON.stringify(obj2))
|
|
|
+ }
|
|
|
+ btn2.onclick = function() {
|
|
|
+ console.log(localStorage['address'])
|
|
|
+ // console.log(localStorage.age)
|
|
|
+ // console.log(localStorage.getItem("name"))
|
|
|
+ }
|
|
|
+ btn3.onclick = function() {
|
|
|
+ // localStorage.removeItem("name")
|
|
|
+ // localStorage.clear()
|
|
|
+ let news = localStorage.key(1);
|
|
|
+ console.log(news)
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zheng