<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text"/> <button class="set">存储</button> <button class="get">获取</button> <button class="remove">删除</button> <button class="del">清空</button> </body> </html> <script type="text/javascript"> // 吧用户存储在用户的浏览器中 // 页面刷新不丢失 // session---5M local---20M // 存进去是字符串 // sessionStoragr(key,value)---关闭页面消失 var ipt = document.querySelector('input') var set = document.querySelector('.set') set.addEventListener('click',function(){ // 点击储存 var val = ipt.value; sessionStorage.setItem('uname',val) }) // 获取 var get = document.querySelector('.get') get.addEventListener('click',function(){ console.log(sessionStorage.getItem('uname')) }) // 删除 var remove = document.querySelector('.remove') remove.addEventListener('click',function(){ sessionStorage.removeItem('uname') }) // 全删 var del = document.querySelector('.del') del.addEventListener('click',function(){ sessionStorage.clear() }) </script>
简单方便高效。
