Detailed introduction to webstorage [local data processing of html5]-H5 Tutorial-php.cn

Detailed introduction to webstorage [local data processing of html5]

黄舟

Release： 2017-03-14 15:51:03

Original

1505 people have browsed it

The editor below will bring you an in-depth analysis of local data processing of webstorage[html5]. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Come and take a look with the editor, I wish you all a happy game

1. What is webStorage?

webStorage is a method used for localized storage in html5. Before, we used the cookie storage method;

2. What is the difference between them?

Ⅰ. Problems with cookies:

ⅰ. Cookie needs to send a request to the server, and the server returns a cookieId, which is stored in the browser cache requires a certain amount of bandwidth. [Cookies will be sent together with the header information of each HTTP request, which invisibly increases network traffic];

ⅱ. The data capacity stored by cookies is limited and varies depending on the browser type. IE6 can only store approximately 2K;

Ⅱ. And webstorage only needs to store data locally;

3. We can give a small example to illustrate

eg: Enter the user name and password, click button 1 to save the data, click button 2, and you can get it after refreshing the page;

Process:

ⅰ. Create an event

XML/HTML Code复制内容到剪贴板
function MyClick1()   
{   
}

Copy after login

##ⅱ. Get its user name through an id

##JavaScript CodeCopy content to clipboard

var username = $("#TxtUserName").val();

Copy after login

JavaScript Code

Copy content to clipboard

var pwd = $("#TxtPwd").val();

Copy after login

session

Storege, used in Firefox2+火狐 browser;

Life cycle

: The data stored in this way is only valid at the window level. When the same window (or Tab) page is refreshed or jumped, the locally stored data can be obtained. When new When opening a window or page, the original data becomes invalid [current page only]Disadvantages: IE does not support it and cannot achieve persistent data storage.

##JavaScript Code

Copy content to clipboard

sessionStorage.setItem(
"k_username"
, username);            sessionStorage.setItem(
"k_pwd"
, pwd);

Copy after login

Note: sessionStorage.setItem is stored in key-value pairs;

## ②. The second way: localStorage

Detailed introduction to webstorage [local data processing of html5] localStorage It is part of the Web Storage Internet Storage specification and is now supported in Firefox 3.5, Safari 4 and IE8.

Life cycle: Stored in the local C drive, it will still exist after the browser is closed and opened;

Disadvantages: Lower version browsers do not support it.

JavaScript Code复制内容到剪贴板
localStorage.setItem("k_username", username);   
           localStorage.setItem("k_pwd",pwd);

Copy after login

JavaScript Code复制内容到剪贴板
alert("保存成功！");

Copy after login

# #ⅵ.Button 2 prints all the above data

JavaScript Code复制内容到剪贴板
function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

Copy after login

The second way to print

JavaScript Code复制内容到剪贴板
function MyClick2() {   
            alert(localStorage.getItem("k_username"));   
            alert(localStorage.getItem("k_pwd"))   
           }

Copy after login

##The result shows:

ⅶ. Extension: removeItem method of localStorage

Detailed introduction to webstorage [local data processing of html5]

//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

Copy after login

//localStorage.removeItem("k_username");

Copy after login

Detailed introduction to webstorage [local data processing of html5]

Track local data:

Result display:

Detailed introduction to webstorage [local data processing of html5]

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

Copy after login

localStorage.clear();

Copy after login

结果显示:

Detailed introduction to webstorage [local data processing of html5]

代码显示：

XML/HTML Code复制内容到剪贴板




    
    
    
    



    
        
            用户名:
            
                
            
        
        
            密码:

Copy after login

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(function () {   
        //4.页面刷新之后判断它是否为空？   
        if (localStorage.getItem("k_showCon") != null) {   
            //5.存在，就把获取到的内容存到里面去   
            "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
        }   
    });   
        function preservationClick()   
        {   
            var sCon = $("#mCon").val();   
            //2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法   
            $("#showCon").append("<p>" + sCon + "</p>");   
            //3.预期的是刷新之后留言还在   
            localStorage.setItem("k_showCon", $("#showCon").html());   
        }   
        function ClearClick()   
        {   
            //6.获取到显示p里面的内容清除   
            $("#showCon").html("");   
            localStorage.clear();   
        }   
    </script>
</head>
<body>
    <p>
        <table>
            <tr>
                <td colspan="2">
                    <textarea id="mCon" cols="25" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                <td><input type="button" value="清除" onclick="ClearClick()" /></td>
            </tr>
        </table>
        <p id="showCon"></p>
    </p>
</body>
</html>

Copy after login

效果显示:

Detailed introduction to webstorage [local data processing of html5]

The above is the detailed content of Detailed introduction to webstorage [local data processing of html5]. For more information, please follow other related articles on the PHP Chinese website!