HTML5学习笔记17-Web存储

2024-04-27 15:10:57

字体：大中小

来源：转载

供稿：网友

1、web存储数据的两种方式

localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储（页面关闭时清楚数据）与cookie对比：cookie不适合做大量数据的存储，速度慢且效率不高。

2、localStorage

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <textarea style="width: 200px;height: 200px" id="mytxt"></textarea>    <button id="mybtn">保存</button>    <script>        var mytxt;        var mybtn;        window.onload=function () {            mytxt=document.getElementById("mytxt");            if(localStorage.text){                //不为空时                mytxt.value=localStorage.text;            }            mybtn=document.getElementById("mybtn");            mybtn.onclick=function(){                //alert(mytxt.value);                localStorage.text=mytxt.value;            }        }    </script></body></html>3、sessionStorage
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <span id="txt">0</span>    <button id="mybtn">Add</button>    <script>        var myspan;        var mybtn;        var num=0;        window.onload=function () {            myspan=document.getElementById("txt");            mybtn=document.getElementById("mybtn");            if(sessionStorage.num){                num=sessionStorage.num;                showNum();            }else{                num=0;            }            mybtn.onclick=function () {                num++;                sessionStorage.num=num;                showNum();            }        }        function showNum(){            myspan.innerHTML=num;        }    </script></body></html>

上一篇：13.（初级）CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法

下一篇：JS算法与数据结构之A*寻路