Rumah > hujung hadapan web > Tutorial H5 > Html5的学习之旅-Html5的web Storage概述(16)

Html5的学习之旅-Html5的web Storage概述(16)

黄舟
Lepaskan: 2017-02-17 14:49:58
asal
1362 orang telah melayarinya

在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题:

大小:Cookies的大小被限制在4kb左右

带宽:Coolies是随着Http业务被一起发送的,因此会浪费一部分带宽

复杂性:要正确的操作Cookies是很苦难的

针对以上问题,html5提出了一种在本地保存数据的方法:web storage

它有两种处理方式:

session storage:将数据保存在session对象中。session是用户打开这个网站到关闭这个网站,所经历的时间,也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。

local storage:将数据保存在客户端的硬件(硬盘)中,即使用户的浏览器关闭了。下次打开时候,也会重新加载

session storage实例

index.html代码

<!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>
Salin selepas log masuk
Salin selepas log masuk

appWeb代码

/**
 * 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;
}
Salin selepas log masuk
Salin selepas log masuk

!!!!效果图

这里写图片描述

local storage的实例

index代码没变,js代码

/**
 * 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;
}
Salin selepas log masuk
Salin selepas log masuk

效果图

这里写图片描述

在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题:

大小:Cookies的大小被限制在4kb左右

带宽:Coolies是随着Http业务被一起发送的,因此会浪费一部分带宽

复杂性:要正确的操作Cookies是很苦难的

针对以上问题,html5提出了一种在本地保存数据的方法:web storage

它有两种处理方式:

session storage:将数据保存在session对象中。session是用户打开这个网站到关闭这个网站,所经历的时间,也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。

local storage:将数据保存在客户端的硬件(硬盘)中,即使用户的浏览器关闭了。下次打开时候,也会重新加载

session storage实例

index.html代码

<!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>
Salin selepas log masuk
Salin selepas log masuk

appWeb代码

/**
 * 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;
}
Salin selepas log masuk
Salin selepas log masuk

!!!!效果图

这里写图片描述

local storage的实例

index代码没变,js代码

/**
 * 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;
}
Salin selepas log masuk
Salin selepas log masuk

效果图

这里写图片描述

 以上就是Html5的学习之旅-Html5的web Storage概述(16)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan