Web存储

①html4是采用cookies存储的

　cookies的缺点:

  1. 大小限制在4kb;
  2. 带宽浪费
  3. 难以操作

②html5新增存储方法

  1. 临时保存 　　sessionStorage
  2. 永久保存　　localStorage
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web Storage本地储存</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<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');">
</body>
</html>
index.html
/*
 * 永久保存,将数据永久保存在客户端本地的硬件设备上,关闭浏览器,数据不会丢失
 */
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    localStorage.setItem('mess',str);
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=localStorage.getItem("mess");
    target.innerHTML=msg;
}
index2.js
/*
 * 临时保存,打开网站到关闭网站之间要求进行保存的数据
 */
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem('mess',str);
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("mess");
    target.innerHTML=msg;
}
index.js

index.js为临时存储的方法

index2.js为永久存储的方法

在index.html文件中修改这句,可以切换调试

<script type="text/javascript" src="index2.js"></script>

TIP:
localStorage.setItem(key,value);存储
localStorage.getItem(key);读取
localStorage.clear();清空
posted @ 2018-01-12 14:00  苹瑶  阅读(140)  评论(0)  编辑  收藏  举报