HTML5中的localStorage怎么用

這篇文章主要介紹“HTML5中的localStorage怎么用”，在日常操作中，相信很多人在HTML5中的localStorage怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5中的localStorage怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Html5 的local storage 是通過瀏覽器在本地存儲的數據。

基本使用方法如下：

JavaScript Code復制內容到剪貼板

<script type="text/javascript">     

localStorage.firstName = "Tom";     

alert(localStorage.firstName);     

</script>    

這樣的話，就將數據保存到本地了，但是本地數據是以什么形式進行保存的呢，經過跟蹤，發現在Chrome瀏覽器中，數據是以sqlite的數據庫文件形式存儲的。

在windows下，是保存在C:/Documents and Settings/User Name/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage 路徑(其中User Name是指當前的用戶名)下的；

在Mac下，是保存在/Users/User Name/Library/Application Support/Google/Chrome/Default/Local Storage路徑(其中User Name是指當前的用戶名)路徑下的

雖然后綴名是.localstorege 但是實際上就是sqlite的數據庫文件，可以用sqlite打開，并看到其中的數據。（可以使用firefox的SQLite Manager附加組件打開）

安裝組件步驟和安裝firebug類似，選擇菜單工具-->附件組件，打開附件組件設置頁，搜索"SQLite Manager"關鍵字，安裝"SQLite Manager"插件后重啟firefox，就可以在工具中看到"SQLite Manager"附加組件了：

下面是幾個常用的localStorage方法：

1、添加localStorage

XML/HTML Code復制內容到剪貼板

localStorage.setItem(“key”,”value”);     //以“key”為名稱存儲一個值“value”  

2、獲取localStorage

XML/HTML Code復制內容到剪貼板

localStorage.getItem(“key”);    //獲取名稱為“key”的值  

3、刪除localStorage

XML/HTML Code復制內容到剪貼板

localStorage.removeItem(“key”);     //刪除名稱為“key”的信息  

4、清空localStorage

XML/HTML Code復制內容到剪貼板

localStorage.clear();     //清空localStorage中所有信息  

5、查看已經保存的localStorage

可通過chrome瀏覽器的控制臺工具Resource&ndash;Local Storage里查看

到此，關于“HTML5中的localStorage怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！