HTML5 Web存储数据(localStorage,sessionStorage)

布满荆棘的人生 2023-10-17 11:46 19阅读 0赞

客户端存储数据的之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

Web 储存新方法:

**（1）localStorage :没有时间限制的数据存储（与浏览器无关，不管何时打开数据依然存在!）**

index.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        
        <script type="text/javascript" src="my.js"></script>
    </head>
    <body>
      <textarea id="ta" style="width: 200px; height: 200px"></textarea>
    <button id="btn">save</button>
    </body>
    </html>

my.js

/**
     * Created by Administrator on 2017-03-20.
     */
    var ta,btn;
    // 加载事件
    window.οnlοad=function(){
        ta = document.getElementById("ta");
        btn = document.getElementById("btn");
    
        //判断是否不为空，则就将数据放入的ta.value中
        if(localStorage.text){
            ta.value=localStorage.text;
        }
    
        //注意：localStorage保存的数据没有时间限制
        //按钮单击事件
        btn.οnclick=function(){
         //   alert(ta.value);
            localStorage.text=ta.value; //将文本数据存入到本地
        }
    
    }

**效果：（右键|检查|选择Application）**

![Center][]

**（2）sessionStorage :针对一个session的数据存储;(当浏览器关闭之后，数据就会被删除)**

session.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="session.js"></script>
    </head>
    <body>
     <span id="txt">0</span>
    <button id="btn">Add</button>
    </body>
    </html>

session.js

/**
     * Created by Administrator on 2017-03-20.
     */
    var number=0;
    var txt,btn;
    
    //加载事件
    window.οnlοad=function(){
    
        //获得文本对象
        txt= document.getElementById("txt");
        btn= document.getElementById("btn");
    
        //判断是否存在
        if(sessionStorage.number){
            number =sessionStorage.number;
        }else{
            number=0;
        }
    
        //单击按钮累计number
        btn.οnclick=function(){
            number++;  //累计
            sessionStorage.number = number; //用会话保存当前累计的数字
            txt.innerHTML=number; //将累计的值赋给文本
        }
    }

**效果：（右键|检查|选择Application）**

**![Center 1][]**

单击刷新!

![Center 2][]

继续累计!

![Center 3][]

关闭浏览器，重新打开就又从0开始了

![Center 4][]

[Center]: https://img-blog.csdn.net/20170320093447506?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170320093844490?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20170320093919960?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20170320093932492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20170320093946242?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center