html5可不可以保存到本地

這篇文章主要介紹了html5可不可以保存到本地的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇html5可不可以保存到本地文章都會(huì)有所收獲，下面我們一起來看看吧。

html5可以保存到本地，html5中推出了2種本地存儲(chǔ)的方式，分別是：1、localStorage，用于長(zhǎng)久保存網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，可手動(dòng)刪除；2、sessionStorage，sessionStorage存儲(chǔ)的數(shù)據(jù)在用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

HTML5中web本地存儲(chǔ)

1.1.1 什么是html5web本地存儲(chǔ)（web存儲(chǔ)）？

html5web本地存儲(chǔ)可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。web本地存儲(chǔ)相對(duì)cookie更加安全和快速，它的數(shù)據(jù)不會(huì)保存在服務(wù)器上。它也可以存儲(chǔ)大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。

html5推出了2種本地存儲(chǔ)的方式：localStorage和sessionStorage 。

1.1.2 客戶端存儲(chǔ)數(shù)據(jù)localStorage

用于長(zhǎng)久保存網(wǎng)站的數(shù)據(jù)(它不會(huì)隨著我們關(guān)閉瀏覽器而消失)，保存的數(shù)據(jù)沒有過期時(shí)間，可手動(dòng)刪除（就是通過js腳本刪除--刪除單個(gè)，刪除所有）。

localStorage是一個(gè)對(duì)象，我們通過typeof檢測(cè) localStorage數(shù)據(jù)類型。檢測(cè)的結(jié)果是其數(shù)據(jù)類型是object。

常用API如下：

保存數(shù)據(jù)：localStorage.setItem(key,value);

讀取數(shù)據(jù)：localStorage.getItem(key);

刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);

刪除所有數(shù)據(jù)：localStorage.clear();

獲取得到某個(gè)索引的key：localStorage.key(index);

注意：鍵/值對(duì) --- 通常以字符串存儲(chǔ)

如：

首先，我們申明一個(gè)變量存儲(chǔ)用戶名username，賦值為tom。這是這個(gè)值被存儲(chǔ)到客戶端的localStorage中。

 <script>
        localStorage.username = '張一'; 
    </script>

預(yù)覽：

接著，我們注釋掉localStorage.username = '張一';

<script>
        // localStorage.username = '張一'; 
        console.log(localStorage.username);
    </script>

然后我們打印localStorage.username，這時(shí)，我們?cè)诳刂婆_(tái)會(huì)看到username的值被打印出來了。

預(yù)覽：

保存數(shù)據(jù)：

localStorage.setItem(key,value);

localStorage.setItem(key:string, value:string)  其中key的數(shù)據(jù)類型是字符串string；value的數(shù)據(jù)類型是字符串string。

 <script>
 localStorage.setItem('age','18')
    localStorage.setItem('sex','男')
    localStorage.setItem('tel','15856567131')
    </script>

預(yù)覽：

讀取數(shù)據(jù)：localStorage.getItem(key);

 // localStorage 獲取數(shù)據(jù)
    var uname=localStorage.getItem('uname')
    console.log(uname);

    var age=localStorage.getItem('age')
    console.log(age, typeof age);
   
    var tel=localStorage.getItem('tel')
    console.log(tel, typeof tel);

預(yù)覽：

刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);

<script>    
localStorage.removeItem('tel');
</script>

預(yù)覽：

刪除所有數(shù)據(jù)：localStorage.clear();

<script>   
localStorage.clear();
</script>

預(yù)覽：

獲取得到某個(gè)索引的key：localStorage.key(index);

//在控制臺(tái)中查看localStorage 是否有數(shù)據(jù) 如果length=0代表無數(shù)據(jù)
    console.log(localStorage);
//獲取某個(gè)索引的key
    var k0=localStorage.key(0)
    console.log(k0);

    var k1=localStorage.key(1)
    console.log(k1);

預(yù)覽：

注意：鍵/值對(duì) --- 通常以字符串存儲(chǔ)

localStorage獲取的值是一個(gè)字符串，如果我們要進(jìn)行“計(jì)算”，我們需要將字符串用Number() 將字符串轉(zhuǎn)成數(shù)字，然后再參與計(jì)算。

<script>           
        // 向localStorage對(duì)象中保存數(shù)據(jù)
        localStorage.setItem('num1',100)
        localStorage.setItem('num2',200)

        // 讀取數(shù)據(jù)
        var num1 = localStorage.getItem('num1')
        console.log(num1, typeof num1)

        var num2 = localStorage.getItem('num2')

        var sum = Number(num1) + Number(num2);
        console.log(sum)
</script>

預(yù)覽：

表單中輸入框中輸入的內(nèi)容自動(dòng)存入localStorage中，并在刷新頁(yè)面后顯示出來。

<div class="box">
        <label for="search">搜索</label>
    <input type="text" name="" value="" id="search">
    <br>
    <h2 id="r"></h2>
    </div>

<style>
        .box{
            width: 500px;
            margin:60px auto;

        }
    </style>

  <script>
          // 表單中輸入框中輸入的內(nèi)容自動(dòng)存入localStorage中，并在刷新頁(yè)面后顯示出來。
          //抓取元素
        var search =document.getElementById('search')
        console.log(search);
        var h2=document.getElementById('r')
        console.log(h2);
        search.onchange=function(){
        //向localStorage對(duì)象中保存數(shù)據(jù)
        localStorage.setItem('mysearch',this.value)
    }    

        window.onload=function(){
            var result=localStorage.getItem('mysearch')
            console.log(result);
            r.innerHTML=result;
               if(localStorage.length>0){
                 localStorage.removeItem('mysearch')
            }
           
    }

    </script>

預(yù)覽：

1.1.3 客戶端存儲(chǔ)數(shù)據(jù)sessionStorage

sessionStorage存儲(chǔ)的數(shù)據(jù)在用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

常用的API(和localStorage的api相同)如下所示：

保存數(shù)據(jù)：sessionStorage.setItem(key,value);

讀取數(shù)據(jù)：sessionStorage.getItem(key);

刪除單個(gè)數(shù)據(jù)：sessionStorage.removeItem(key);

刪除所有數(shù)據(jù)：sessionStorage.clear();

獲取得到某個(gè)索引的key:  sessionStorage.key(index);

注意：鍵/值對(duì) --- 通常以字符串存儲(chǔ)

保存數(shù)據(jù)：sessionStorage.setItem(key,value);

  //保存數(shù)據(jù)
        sessionStorage.setItem('username','tom');
        sessionStorage.setItem('age',19);
        sessionStorage.setItem('sex','男')
        sessionStorage.setItem('tel','13866002972')

        console.log(sessionStorage);

預(yù)覽：

接著，我們關(guān)閉瀏覽器。再次打開瀏覽器，打開剛剛我們?cè)L問的這個(gè)文件的地址，查看Application中sessionStorage中，看是否有數(shù)據(jù)。結(jié)果，我們發(fā)現(xiàn)sessionStorage中已經(jīng)沒有數(shù)據(jù)。如下所示：

由此，我們可以看到sessionStorage只是一次性保存數(shù)據(jù)。當(dāng)我們關(guān)閉瀏覽器，或者關(guān)閉瀏覽器的一個(gè)窗口后，我們的數(shù)據(jù)會(huì)被刪除。

讀取數(shù)據(jù)：sessionStorage.getItem(key);

<script>
        var username=sessionStorage.getItem('username')
        console.log(username);
        </script>

刪除單個(gè)數(shù)據(jù)：sessionStorage.removeItem(key);

<script>
 sessionStorage.removeItem('age');
 </script>

刪除所有數(shù)據(jù)：sessionStorage.clear();

<script>   
sessionStorage.clear();
</script>

獲取得到某個(gè)索引的key:  sessionStorage.key(index);

 <script> 
  var k0=sessionStorage.key(3)
        console.log(k0);
        </script>

預(yù)覽：

1.2 html5中MathML數(shù)學(xué)標(biāo)記語(yǔ)言

HTML5 可以在文檔中使用 MathML 元素，對(duì)應(yīng)的標(biāo)簽是 <math>...</math> 。

MathML 是數(shù)學(xué)標(biāo)記語(yǔ)言，是一種基于XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）的標(biāo)準(zhǔn)，用來在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號(hào)和公式的置標(biāo)語(yǔ)言。

 <div>
        <!-- sup上標(biāo)標(biāo)簽 -->
        3<sup>3</sup>
    </div> 

    <div>
        <!-- sub下標(biāo)標(biāo)簽 -->
        H<sub>2</sub>
    </div>
    <div>
     <math  xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <msup>
                    <mi>a</mi><mn>2</mn>
                    <mo>+</mo>
                </msup>
                <msup>
                    <mi>b</mi><mn>2</mn>
                    <mo>=</mo>
                </msup>
                <msup>
                    <mi>c</mi><mn>2</mn>
                </msup>
            </mrow>
        </math>
    </div>

預(yù)覽：

關(guān)于上標(biāo) 下標(biāo)，不推薦這樣寫。我們正常使用html中的上標(biāo)sup和下標(biāo)sub去寫。

關(guān)于“html5可不可以保存到本地”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“html5可不可以保存到本地”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。