H5缓存机制
sessionStorage
<body> #描述 sessionStorage的使用,存储数据到本地,存储的容量5mb左右 1.这个数据本质是存储在当前页面的内存中 2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除 #语法 setItem(key,value):存储数据,以键值对方式存储 getItem(key):获取数据,通过指定名称的key获取对应的value值 removeItem(key):删除数据,通过指定名称的key删除对应的value值 clear():清空所有存储的内容 <input type="text" id="userName"/> <input type="button" value="设置数据" id="setData"/> <input type="button" value="获取数据" id="getData"/> <input type="button" value="删除数据" id="removeData"/> <script> //存储数据 document.querySelector("#setData").onclick = function(){ //获取用户名 var name = document.querySelect("#userName").value; //存储数据 window.sessionStorage.setItem("userName",name); } //获取数据 document.querySelector("#getData").onclick = function(){ //如果找不到对应名称的key,那么就会获取null var name = window.sessionStorage.getItem("userName"); alert(name); } //删除数据 document.querySelector("#removeData").onclick = funciton(){ //在删除的时候如果key值错误,不会报错,但是也不会删除数据 window.sessionStorage.removeItem("userName1"); } </script> </body>
localStorage
<body> #描述 localStorage的使用,存储数据到本地,存储的容量20mb左右 1.不同的浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据 2.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器关闭而清除,如果想清除,必须手动清除 #语法 setItem(key,value):存储数据,以键值对方式存储 getItem(key):获取数据,通过指定名称的key获取对应的value值 removeItem(key):删除数据,通过指定名称的key删除对应的value值 clear():清空所有存储的内容 <input type="text" id="userName"/> <input type="button" value="设置数据" id="setData"/> <input type="button" value="获取数据" id="getData"/> <input type="button" value="删除数据" id="removeData"/> <script> //存储数据 document.querySelector("#setData").onclick = function(){ //获取用户名 var name = document.querySelect("#userName").value; //存储数据 window.localStorage.setItem("userName",name); } //获取数据 document.querySelector("#getData").onclick = function(){ //如果找不到对应名称的key,那么就会获取null var name = window.localStorage.getItem("userName"); alert(name); } //删除数据 document.querySelector("#removeData").onclick = funciton(){ //在删除的时候如果key值错误,不会报错,但是也不会删除数据 window.localStorage.removeItem("userName1"); } </script> </body>