您的位置：首页 > Web前端 > HTML5

Storage---Html5 Web的5中离线存储方式之localStorage

2015-06-16 16:53 736 查看
在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>

看看运行效果

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航