Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。
Web Storage又分為兩種：
sessionStorage
localStorage
從字面意思就可以很清楚的看出來，sessionStorage將數據保存在session中，瀏覽器關閉也就沒了；而localStorage則一直將數據保存在客戶端本地；
不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數據：localStorage.setItem(key,value);讀取數據：localStorage.getItem(key);刪除單個數據：localStorage.removeItem(key);刪除所有數據：localStorage.clear();得到某個索引的key：localStorage.key(index);如上，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。
接下來，我們通過Web Storage開發一個簡單的通訊錄小程序，以演示相關API的使用方法；我們要實現如下功能：
錄入聯系人，聯系人有姓名、手機號碼2個字段，以手機號作為key存入localStorage；根據手機號碼，查找機主；列出當前已保存的所有聯系人信息；首先先寫一個簡單的html代碼
XML/HTML Code復制內容到剪貼板
- <!DOCTYPEHTML>
- <html>
- <head>
- <metacharsetmetacharset="utf-8"/>
- <title>HTML5本地存儲之WebStorage篇</title>
- </head>
- <body>
- <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">
- <labelforlabelfor="user_name">姓名：</label>
- <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>
- <br/>
- <labelforlabelfor="mobilephone">手機：</label>
- <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>
- <br/>
- <inputtypeinputtype="button"onclick="save()"value="新增記錄"/>
- <hr/>
- <labelforlabelfor="search_phone">輸入手機號：</label>
- <inputtypeinputtype="text"id="search_phone"name="search_phone"/>
- <inputtypeinputtype="button"onclick="find()"value="查找機主"/>
- <pidpid="find_result"><br/></p>
- </div>
- <br/>
- <dividdivid="list">
- </div>
- </body>
- </html>
寫完頁面的話，展示效果差不多就是如下圖：
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。