HTML5 Web存储

2021-06-08 23:06:18 阅读：151 来源： 互联网

标签：function Web 存储 num localStorage HTML5 var btn ta

HTML5提供了两种在客户端存储数据的新方法：

localStorage - 没用时间限制的数据存储，一年以后数据仍然可以使用
sessionStorage -针对一个session的数据存储之前，这些都是由cookie完成的。但是cooki不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高

下面来看localStorage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var ta;
        var btn;
     window.onload = function(){
        ta = document.getElementById("ta");
        if(localStorage.text){
            ta.value = localStorage.text;//有内容直接显示，没内容不显示
        }
        btn = document.getElementById("btn");
        btn.onclick = function(){
            // alert(ta.value);
            localStorage.text = ta.value;//点击之后将输入的数据保存
        } 
     }
    </script>
</head>
<body>
    <textarea style="width: 200px;height: 200px" id="ta"></textarea>
    <button id="btn">sava</button>
</body>
</html>

输入数据，点击save，退出浏览器再重进，依然还是原数据。
在这里插入图片描述
接着来看 sessionStorage：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var num = 0;
        var txt;
        var btn;
        window.onload = function(){
            txt = document.getElementById("txt");
            btn = document.getElementById("addbtn");
            if(sessionStorage.num){
                num = sessionStorage.num;
            }else{
                num = 0;
            }

            btn.onclick = function(){
                num++;
                sessionStorage.num = num;
                showNum();
            }
        }
        function showNum(){
                txt.innerHTML = num;
            }
    </script>
</head>
<body>
    <span id="txt">0</span>
    <button id="addbtn">add</button>
</body>
</html>

连续点击add，数字一值增加，点击刷新，数值为0，但再次点击，数值为未刷新前的值+1。
在这里插入图片描述

标签：function,Web,存储,num,localStorage,HTML5,var,btn,ta
来源： https://blog.csdn.net/boyas/article/details/117717457

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5 Web存储