Html5 learning journey-Html5 web storage overview (16)-H5 Tutorial-php.cn

Html5 learning journey-Html5 web storage overview (16)

黄舟

Release： 2017-02-17 14:49:58

Original

1357 people have browsed it

In addition to canvas, another very important function in HTML5 is client-side local storage web storage. Previously, user names and other information could be stored in user-side cookies. Later, it was discovered that there are the following problems with cookie storage:

Size: The size of Cookies is limited to about 4kb

Bandwidth: Cookies are sent together with the HTTP business, so part of the bandwidth will be wasted

Complexity: Required It is very difficult to operate Cookies correctly

In response to the above problems, HTML5 proposes a method to save data locally: web storage

It has two processing methods:

session storage: Save data in the session object. Session is the time that elapses from when a user opens the website to when he closes the website, that is, the time the user browses the website. The session object can save all data during this period.

Local storage: Save data in the client's hardware (hard drive) even if the user's browser is closed. The next time you open it, the

session storage instance

index.html code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

Copy after login

appWeb code

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

Copy after login

will also be reloaded! ! ! ! Rendering

Html5 learning journey-Html5 web storage overview (16)

Instance of local storage

index code has not changed, js code

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

Copy after login

Rendering

Html5 learning journey-Html5 web storage overview (16)

In addition to canvas, another very important function in HTML5 is the local storage of web storage on the client. Previously, user names and other information could be stored in cookies on the client side. Later, Cookies were discovered Storage has the following problems:

Size: The size of Cookies is limited to about 4kb

Bandwidth: Cookies are sent together with the Http business, so part of the bandwidth is wasted

Complexity: It is difficult to operate Cookies correctly

In response to the above problems, HTML5 proposes a method of saving data locally: web storage

It has two processing methods:

session storage: Save data in the session object. Session is the time that elapses from when a user opens the website to when he closes the website, that is, the time the user browses the website. The session object can save all data during this period.

Local storage: Save data in the client's hardware (hard drive) even if the user's browser is closed. The next time you open it, the

session storage instance

index.html code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></body></html>

Copy after login

appWeb code

/**
 * Created by joy liu on 2015/9/22.
 */function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

Copy after login

will also be reloaded! ! ! ! Rendering

Html5 learning journey-Html5 web storage overview (16)

Instance of local storage

index code has not changed, js code

/**
 * Created by joy liu on 2015/9/22.
 *///function saveStorage(id){//    var target = document.getElementById(id);//    var string = target.value;//    sessionStorage.setItem("message",string);//}//function loadStorage(id){//    var target = document.getElementById(id);//    var msg = sessionStorage.getItem("message");//    target.innerHTML = msg;//}function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){    var target = document.getElementById(id);    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

Copy after login

Rendering

Html5 learning journey-Html5 web storage overview (16)

The above is the content of the Html5 learning journey - Html5 web Storage overview (16). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!