在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多。
HTML5的离线存储方式有多种:Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。
Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展。我就不多说了。
今天我们主要看LocalStorage这种最简单的本地存储方式。
先来看一个小例子
<code class="language-html hljs has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span>HTML5中LocalStorage的使用<span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">p</span>></span> 你浏览当前页面 <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"count"</span>></span>N<span class="hljs-tag"></<span class="hljs-title">span</span>></span> 次. <span class="hljs-tag"></<span class="hljs-title">p</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript"> <span class="hljs-keyword">if</span> (!localStorage.pageLoadCount) localStorage.pageLoadCount = <span class="hljs-number">0</span>; localStorage.pageLoadCount = <span class="hljs-built_in">parseInt</span>(localStorage.pageLoadCount) + <span class="hljs-number">1</span>; document.getElementById(<span class="hljs-string">'count'</span>).textContent = localStorage.pageLoadCount; </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>
看看运行效果![这里写图片描述](https://img-blog.csdn.net/20150505110811147)
<code class="language-javascript hljs has-numbering"><span class="hljs-comment">/** * 保存/更新数据 */</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">saveDm</span><span class="hljs-params">(dataModel)</span>{</span> window.localStorage[<span class="hljs-string">'DataModel'</span>] = dataModel; } <span class="hljs-comment">/** * 获取数据 */</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getDm</span><span class="hljs-params">()</span>{</span> <span class="hljs-keyword">var</span> value = window.localStorage[<span class="hljs-string">'DataModel'</span>]; <span class="hljs-keyword">if</span>(value){ <span class="hljs-keyword">return</span> value; } <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>; } <span class="hljs-comment">/** * 删除数据 */</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clearDm</span><span class="hljs-params">()</span>{</span> <span class="hljs-keyword">if</span>(window.localStorage[<span class="hljs-string">'DataModel'</span>]){ <span class="hljs-keyword">delete</span> window.localStorage[<span class="hljs-string">'DataModel'</span>]; } }</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>