【html5】html5 本地存儲

時間 2019-11-13

標籤 html5 html 本地存儲欄目 HTML5 简体版

原文原文鏈接

最近一直在學習 html5，爲了後期的移動項目進行知識儲備。html5 相對於 html4 新增長了一些有趣的標籤、屬性和方法，今天主要介紹下 html5 的本地存儲。html

在客戶端存儲數據

html5 提供了兩種在客戶端存儲數據的新方法：html5

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對 session 的數據存儲，一旦窗口關閉就沒有了

兩個方法用法徹底同樣，下面就以 localStorage 爲例。web

爲何要用本地存儲

早期咱們都是使用 cookie 來完成的，可是 cookie 不適合大量的數據存儲，也就是說它過小，只有 4k 的樣子，並且速度慢效率低。瀏覽器

localStorage 方法

那麼咱們該如何添加數據呢？很簡單，就像給對象添加屬性同樣：cookie

localStorage.pageLoadCount = 1;

能夠經過瀏覽器的控制檯來查看是否有存儲數據：session

一樣讀取和修改數據也很方便：學習

console.log(localStorage.pageLoadCount);    //讀取
localStorage.pageLoadCount = 10;            //修改
console.log(localStorage.pageLoadCount);    //讀取

如下是結果：spa

固然 localStorage 自己自帶一些方法及屬性，具體以下：code

localStorage.clear();                       //清除全部的存儲數據
localStorage.getItem('pageLoadCount');      //讀取存儲數據，返回值 "10"，等同於 localStorage.pageLoadCount
localStorage.key(0);                        //獲取存儲數據的 key，返回值 "pageLoadCount"
localStorage.length;                        //獲取存儲數據的長度
localStorage.removeItem('pageLoadCount');   //刪除特定的存儲數據
localStorage.setItem('name','Jack');        //新增長一個存儲數據，等同於 localStorage.name = 'Jack';

須要注意的是：讀取存儲數據的時候，返回的是字符串，不管以前存的是什麼，最後讀取的都是字符串，因此讀取的時候須要進行類型轉換。htm

最後附上 localStorage 應用的 demo：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>localStorage</title>
</head>
<body>
    <p id="p"></p>
</body>
</html>
<script>
window.onload = function(){
    if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
    document.getElementById('p').innerHTML = '瀏覽次數：' + localStorage.pageLoadCount + ' 次。';
}
</script>