HTML5 WEB 存储
版权声明：未经博主授权，内容严禁转载 ！
WEB 存储系统
- 互联网最初的设想是作为信息展示的一种方式，信息处理是后来才逐渐出现的。
- 但是 WEB 的本质没有改变，数据依然是在服务器上完成的，在客户端显示。
- 对任何程序来讲，实现数据存储是必备的功能之一，并且在需要的视乎提供数据。
- Cookie 曾经是用来存储少量的信息，但是受限于性质，智能存储简短的字符串。
* 在 HTML5 中提供了 WEB 存储的 API ，允许在硬盘上存储数据（持久化）。
* API 可以分为两部分：
- 信息必须且只在会话过程中使用 - sessionStorage
- 信息长期保存且有用户决定时长 - localStorage
sessionSrorage
sessionStorage API 像是 cookie 的替代，会在会话期间保持数据可用。
cookie 使用浏览器作为引用，而 sessionStorage 使用单个窗口作为引用。
这就意味着，窗口关闭后，sessionStorage 就不能再是用了。
创建数据
sessionStorage 和 localStorage 都将数据存储为项，采用键值对的格式。
语法
- setItem(key,value)：用键值对创建项目，主键存在则更新值。
- getItem(key)：根据主键获取对应的值。
- sessionStorage.setItem('uname','wjw');
- var uname = sessionStorage.getItem('uname');
案例代码
<input type="text" id="uname" name="" value="" required> <button type="button" onclick="saveuname()" name="button">save</button> <script type="text/javascript"> function saveuname() { var uname = document.getElementById("uname").value; sessionStorage.setItem("uname",uname); } </script>
读取数据
API 提供了更多的方法和属性操纵项，使代码变得有用。
属性
- length：返回应用程序在储存空间中积累的项的数量。
方法
- key(index)：获取指定索引对应的项的主键。
案例
- var len = sessionStorage.length;
- for(var i=0;i<len;i++){
- var key = sessionStorage.key(i);
- console.log(sessionStorage.getItem(key));
- }
案例代码
<p> <h2 id="msg"></h2> </p> <p> <input type="text" id="key" required> <input type="text" id="value" required><br> <button type="button" onclick="save()" name="button">save</button> <button type="button" onclick="read()" name="button">read</button> </p> <script type="text/javascript"> function save() { var key = document.getElementById("key").value; var value = document.getElementById("value").value; sessionStorage.setItem(key,value); } function read() { var key =document.getElementById("key").value; var msg= document.getElementById("msg"); msg.innerHTML = sessionStorage.getItem(key); } </script>
删除数据
API 提供了两种方式删除项。
- removeItem(key)：根据主键删除指定项。
- clear()：清空整个存储空间，删除所有项。
- sessionStorage.removeItem('uname');
- sessionStorage.clear();
- console.log(sessionStorage.length);
案例代码
<div> <h2 id="msg"></h2> </div> <p> <input type="text" id="key" required> <input type="text" id="value" required><br> <button type="button" onclick="saveStorage()" name="button">save</button> <button type="button" onclick="readStorage()" name="button">read</button> <button type="button" onclick="removeStorage()" name="button">remove</button> <button type="button" onclick="clearStorage()" name="button">clear</button> </p> <script type="text/javascript"> function saveStorage() { var key = document.getElementById("key").value; var value = document.getElementById("value").value; sessionStorage.setItem(key,value); } function readStorage() { var key =document.getElementById("key").value; var msg= document.getElementById("msg"); msg.innerHTML = sessionStorage.getItem(key); } function removeStorage() { var key =document.getElementById("key").value; sessionStorage.removeItem(key); } function clearStorage() { sessionStorage.clear(); } </script>
练习
- 创建登录界面，使用 sessionStorage 存储用户名。
- 在其他界面读取用户信息
login.html 文件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1"> <title>login</title> <style> .form-container { border: 1px solid #999999; margin: 0 auto; width: 50%; text-align: center; } </style> </head> <body> <div class="form-container"> <form action="welcome.html" onsubmit="return check()"> <h2>用户登录</h2> <p> <label for="username">姓名</label> <input type="text" id="username" required> </p> <p> <label for="password">密码</label> <input type="password" id="password" required> </p> <p> <button type="submit">登录</button> <button type="reset">重置</button> </p> </form> <script> function check() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if(!sessionStorage.getItem(username)){ sessionStorage.setItem(username, password); alert("注册成功！"); return false; } if(sessionStorage.getItem(username)===password){ alert("登录成功！"); sessionStorage.setItem("currentuser",username); return true; }else{ alert("登录失败！"); return false; } } </script> </div> </body> </html>
welcome.html 文件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1"> <title>welcome</title> </head> <body> <h2 id="username"></h2> <script> var username = document.getElementById("username"); username.innerHTML = "欢迎你，" + sessionStorage.getItem("currentuser"); </script> </body> </html>
localStorage
在窗口会话期间临时存储数据，某些情况下可用，但是如果想摸你桌面应用，临时的数据存储系统就不够用了。
为了解决这个问题，API 提供了另一个系统，为每个来源保留了一个存储空间，并保存信息持久可用 - localStorage。
利用 localStorage，可以保存大量数据，并有用户决定信息是否保留。
localStorage 和 sessionStorage 拥有相同的接口，方法属性一致。
- localStorage 拓展了 cookie 的 4K 限制。
- localStorage 会可以将第一次请求的数据直接存储到本地，这相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只要在高版本浏览器中才支持的。
localStorage 的局限性
浏览器的大小不统一，并且在 IE8 以上版本才支持 localStorage 这个属性。
目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们目前比较常见的 JSON 对象类型需要一些转换。
localStorage 在浏览器的隐私模式下面是不可读取的。
localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
localStorage 不能被爬虫抓取到。
localStorage 的浏览器支持判断
if(!window.localStorage){
console.log("浏览器不支持localStorage");
}else{
console.log("浏览器支持localStorage");
}
<script type="text/javascript"> if(!window.localStorage){ console.log("浏览器不支持localStorage"); }else{ console.log("浏览器支持localStorage"); } </script>
localStorage 写入
var storage = window.localStorage;
// 写入 a 字段
storage["a"]=1;
// 写入 b 字段
storage.b=1;
// 写入 c 字段
storage.serItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
案例代码
<script type="text/javascript"> if(!window.localStorage){ console.log("浏览器不支持localStorage"); }else{ console.log("浏览器支持localStorage"); localStorage["a"] = "apple"; localStorage.b="banana"; localStorage.setItem("c",3); } </script>
localStorage 存储 JSON 数据
var storage = window.localStorage;
var data = {
title : "html" ,
author : "w3c" ,
price : 10.99
};
var d = JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
案例代码
<script type="text/javascript"> var storage = window.localStorage; var book = { title:"html", author:"w3c", price:10.99, }; console.log(typeof book); // 打印 book 类型 var str = JSON.stringify(book); // 转化成字符串 console.log(typeof str); // 打印 str 类型 console.log(str); // 输出字符串 storage.setItem("book",str); </script>
localStorage 读取 JSON 数据
var json = storage.getItem("data");
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);
案例代码
<script type="text/javascript"> var storage = window.localStorage; var book = { title:"html", author:"w3c", price:10.99, }; console.log(typeof book); // 打印 book 类型 var str = JSON.stringify(book); // 转化成字符串 console.log(typeof str); // 打印 str 类型 console.log(str); // 输出字符串 storage.setItem("book",str); var str1 = storage.getItem("book"); var book1 = JSON.parse(str1); document.writeln("标题："+book1.title); document.writeln("<br/>"); document.writeln("作者："+book1.author); document.writeln("<br/>"); document.writeln("价格："+book1.price); document.writeln("<br/>"); </script>
