HTML5新增了一个可以在客户端保存数据的web stroage功能。取代HTML4中的 cookies存储机制。
一、cookies存在的问题:
1.大小:cookies的大小被限制在4kb
2.带宽: cookies是随HTTP事务一起被发送的。因此会浪费一部分发送cookies时使用的带宽
3.复杂性:要正确地操纵cookies是困难的
二、web storage分为两种
1.sessionStorage : 将数据保存在session对象中
2.localStorage: 将数据保存在客户端本地的硬件设置中
两者的区别: sessionStorage为临时存储,localStorage为永久保存
(1)sessionStorage:
保存数据的方法:setItem
sessionStorage.setItem('key','value'); 或 sessionStorage.key='value';
读取数据的方法:getItem
变量 = sessionStorage.getItem('key'); 或 变量=sessionStorage.key;
(2)localStorage
保存数据的方法:setItem
localStorage.setItem('key','value'); 或 localStorage.key='value';
读取数据的方法:getItem
变量 = localStorage..getItem('key'); 或 变量=localStorage..key;
案例:
<h1> web storage 案例</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
<script>
//sessionStorage
function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
// 或 sessionStorage.message=str;
}
function loadStorage(id){
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
// 或 msg = sessionStorage.message
target.innerHTML = msg;
}
//localStorage
function saveStorage(id){
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
// 或 sessionStorage.message=str;
}
function loadStorage(id){
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
// 或 msg = sessionStorage.message
target.innerHTML = msg;
}
</script>
运行结果: