解析HTML5中的新功能本地存儲(chǔ)localStorage

Html5 的local storage 是通過瀏覽器在本地存儲(chǔ)的數(shù)據(jù)。
基本使用方法如下:
- <script type="text/javascript">
- localStorage.firstName = "Tom";
- alert(localStorage.firstName);
- </script>
這樣的話,就將數(shù)據(jù)保存到本地了,但是本地?cái)?shù)據(jù)是以什么形式進(jìn)行保存的呢,經(jīng)過跟蹤,發(fā)現(xiàn)在Chrome瀏覽器中,數(shù)據(jù)是以sqlite的數(shù)據(jù)庫文件形式存儲(chǔ)的。
在windows下,是保存在C:\Documents and Settings\User Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage 路徑(其中User Name是指當(dāng)前的用戶名)下的;
在Mac下,是保存在/Users/User Name/Library/Application Support/Google/Chrome/Default/Local Storage路徑(其中User Name是指當(dāng)前的用戶名)路徑下的
雖然后綴名是.localstorege 但是實(shí)際上就是sqlite的數(shù)據(jù)庫文件,可以用sqlite打開,并看到其中的數(shù)據(jù)。(可以使用firefox的SQLite Manager附加組件打開)
安裝組件步驟和安裝firebug類似,選擇菜單工具-->附件組件,打開附件組件設(shè)置頁,搜索"SQLite Manager"關(guān)鍵字,安裝"SQLite Manager"插件后重啟firefox,就可以在工具中看到"SQLite Manager"附加組件了,如下圖所示:
下圖是查看剛剛保存的本地?cái)?shù)據(jù)文件
下面是幾個(gè)常用的localStorage方法:
1、添加localStorage
- localStorage.setItem(“key”,”value”); //以“key”為名稱存儲(chǔ)一個(gè)值“value”
2、獲取localStorage
- localStorage.getItem(“key”); //獲取名稱為“key”的值
3、刪除localStorage
- localStorage.removeItem(“key”); //刪除名稱為“key”的信息
4、清空localStorage
- localStorage.clear(); //清空localStorage中所有信息
5、查看已經(jīng)保存的localStorage
可通過chrome瀏覽器的控制臺(tái)工具Resource–Local Storage里查看
相關(guān)文章
HTML5 LocalStorage 本地存儲(chǔ)詳細(xì)概括(多圖)
這篇文章主要介紹了HTML5 LocalStorage 本地存儲(chǔ),給標(biāo)簽元素添加屬性和瀏覽器兼容性都做了詳細(xì)概括,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一2017-08-18html5 localStorage本地存儲(chǔ)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
localStorage 即本地存儲(chǔ),可用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去除2017-07-06localstorage和sessionstorage使用記錄(推薦)
通過閱讀各路大神對(duì)web存儲(chǔ)locastorage和sessionstorage的用法解析,深有感觸,下面小編把localstorage和sessionstorage使用記錄分享到腳本之家平臺(tái),供大家參考2017-05-23詳解HTML5 LocalStorage 本地存儲(chǔ)
本篇文章主要介紹了HTML5 LocalStorage 本地存儲(chǔ) ,HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上,并再以后需要的時(shí)候進(jìn)行獲取。有興趣的可以了解2016-12-23html5本地存儲(chǔ) localStorage操作使用詳解
這篇文章主要介紹了html5本地存儲(chǔ) localStorage操作使用詳解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-20HTML5 本地存儲(chǔ) LocalStorage詳解
下面小編就為大家?guī)硪黄狧TML5 本地存儲(chǔ) LocalStorage詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-24- 這篇文章主要介紹了HTML5中Localstorage的使用教程,Localstorage被用于瀏覽器和系統(tǒng)交互的本地傳出,需要的朋友可以參考下2015-07-09
localStorage的過期時(shí)間設(shè)置的方法詳解
這篇文章主要介紹了localStorage的過期時(shí)間設(shè)置的方法詳解的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨2018-11-26