本地存储 Web Storage

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';

扫描二维码关注公众号，回复： 3132050 查看本文章

读取数据的方法：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>

运行结果：

本地存储 Web Storage

猜你喜欢