HTML5 WebStorage
HTML5 中引入了WebStorage的概念，可以让客户端本地保存数据，它接触了传统用cookie存放数据的局限性（只有4KB)
WebStorage分两种：
(1)sessionStorage,这种存储是放在session对象中，一旦浏览器关闭就没了，是临时保存。
(2)localStorage,这种存储对象是放在硬盘上的，所以就算浏览器关闭还有，是永久保存。
我写了一个例子程序来演示这两种情况的区别：
这个页面就是2组组件，第一组组件用于演示sessionStorage,第二组组件用于演示localStorage:
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>Web Storage Demo</title>
- <script type="text/javascript" src="js/storage1.js" ></script>
- </head>
- <body>
- <h1>Web Storage 示例</h1>
- <h3>sessionStorage的存取例子</h3>
- <p id="sessionStorageMessage" >这里会显示sessionStorage的内容</p>
- <input type='text' id="sessionStorageInput"><br>
- <input type="button" value="保存sessionStorage数据" onclick="saveSessionStorage('sessionStorageInput');"><br>
- <input type="button" value="读取sessionStorage数据" onclick="loadSessionStorage('sessionStorageMessage');"><br>
- <h3>localStorage的存取例子</h3>
- <p id="localStorageMessage" >这里会显示localStorage的内容</p>
- <input type='text' id="localStorageInput"><br>
- <input type="button" value="保存localStorage数据" onclick="saveLocalStorage('localStorageInput');"><br>
- <input type="button" value="读取localStorage数据" onclick="loadLocalStorage('localStorageMessage');"><br>
- </body>
js代码中利用了HTML5中与sessionStorage,localStorage相关的API进行数据的存储和读取。
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang ([email protected])
- */
- //sessionStorage 示例 （将数据保存在session对象),当浏览器关闭就没了
- function saveSessionStorage(id){
- //取得用户输入的<input>的值
- var target = document.getElementById(id);
- var str = target.value;
- //用sessionStorage.setItem(key,value)来保存数据
- sessionStorage.setItem("message",str);
- }
- function loadSessionStorage(id){
- var target= document.getElementById(id);
- //用sessionStorage.getItem(key) 来获取数据
- var msg=sessionStorage.getItem("message");
- target.innerHTML=msg;
- }
- //localStorage示例（将数据库保存在硬盘上），当浏览器关闭了数据依然存在
- function saveLocalStorage(id){
- var target = document.getElementById(id);
- var str = target.value;
- localStorage.setItem("message",str);
- }
- function loadLocalStorage(id){
- var target= document.getElementById(id);
- var msg=localStorage.getItem("message");
- target.innerHTML=msg;
- }
初始状态，应该是：
我在sessionStorage中放入"Charles 是帅哥"字符串，通过输入这个字符串然后点击“保存sessionStorage数据”按钮，同时我在localStorage中放入"Jessica 是美女"字符串，通过输入字符串并且点击“保存localStorage"按钮，如图：
下面，演示从storage中获取已经保存的数据：
（a）保持浏览器不关闭状态
分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮，如图：
这里可以看出，在浏览器不关闭的情况下，也就是session没有失效状态下，sessionStorage（临时存储）和localStorage(永久存储）的内容都被正确的读取了
（b)重启浏览器
我们重启浏览器，然后分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮，如图：
这里可以看到，sessionStorage(临时存储）上的数据无法被读出来，但是localStorage（永久存储）上的数据可以被读出来
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...