混合式开发资源3 html5本地存储.pdfVIP

Html5基础 ——第3讲 本地 讲师：Tina 上节回顾 1.HTML5表单新属性 2.HTML5 语法变化 和传统的 方法对比 • 服务器端 ，如session • 浏览器端 ，如 • 举例：银行与钱包 • 有了 ,为何又出现webStorage？ 为什么选择Web Storage而不是 ？ 与 相比，Web Storage存在的优势 • 1. 空间更大：IE8下每个独立的 空间为10M，其他浏览器实现略有不 同，但都比 要大很多。 • 2. 内容不会发送到服务器：当设置了 后， 的内容会随着请 求一并发送的服务器，这对于本地 的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。 • 3. 丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数 据操作更为简便。 • 4. 独立的 空间：每个域 （包括子域）有独立的 空间，各个 空间 是完全独立的，因此不会造成数据 。 2种本地 方法： ⚫ localStorage - 用于持久化的本地 ，除非主动删除数据，否则数据是 不 会过期。 ⚫ sessionStorage - 用于 一个会话 （session）中的数据，这些数据只有在同 一个会话中的页面才能 ，当会话结束后数据也随之销毁。 持久化 localStorage 1.设置 localStorage.t1 = “Tina"; localStorage[“t2”] = “学云网"; localStorage.setItem(“t3”,“讲师"); 2.获取 localStorage.t1; localStorage["t2"]; localStorage.getItem("t3"); 3. 其他 localStorage.removeItem(); //清除 localStorage.clear() //清除所有 localStorage.length //获得多少键 localStorage.key() //获得 的键内容 会话 sessionStorage 1.设置 sessionStorage.t1 = “Tina"; sessionStorage[“t2”] = “学云网"; sessionStorage.setItem(“t3”,“讲师"); 2.获取 sessionStorage.t1; sessionStorage["t2"]; sessionStorage.getItem("t3"); 3. 其他 sessionStorage.removeItem(); //清除 sessionStorage.clear() //清除所有 sessionStorage.length