lovecoding
/
W0407


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
							<!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>