HTML5中的本地存儲及其相關(guān)例子

簡單存儲

HTML5 提供了四種在客戶端存儲數(shù)據(jù)的新方法,即localStorage 雌贱、sessionStorage袱耽、globalStorage、WebSql Database裙盾。 前面三個適用于存儲較少的數(shù)據(jù),而
Web Sql Database適用于存儲大型的,復(fù)雜的數(shù)據(jù)他嫡,我習(xí)慣把前面的三個稱之為小存儲番官。
簡單儲存和cookie的區(qū)別

簡單存儲和cookie的區(qū)別.png

<h4>localStorage詳解</h4>
localStorage / sessionStorage 都有相同的API 如:
①localStorage.length 獲得storage 中的個數(shù)
②localStorage.key(n) 獲得storage中第n個鍵值對的鍵
③localStorage.key=value
④localStorage.setItem(key,value) 添加
⑤localStorage.getItem(key) 獲取
⑥localStorage.removeItem(key) 移除
⑦localStorage.clear() 清除

HTML:
<pre>用戶名:<input type="text" name="names">

密碼: <input type="password" name="pass">

是否保存:<input type="checkbox" name="box"></pre>
<h5>demo1,生命周期</h5>
JavaScript:
<pre>document.cookie = "zhangsan";
localStorage.setItem("name","lisi");
sessionStorage.setItem("name","wangwu");
在注釋上面的三句話之后
alert(document.cookie);//瀏覽器關(guān)閉后沒有
alert(localStorage.getItem("name"));//瀏覽器關(guān)閉后仍然存在
alert(sessionStorage.getItem("name"));//瀏覽器關(guān)閉后沒有</pre>
<h5>demo2钢属,賬號密碼的保存</h5>
JavaScript :
<pre>window.onload = function() {
var names = document.getElementsByName("names")[0],
pass = document.getElementsByName("pass")[0],
box = document.getElementsByName("box")[0];
names.value = localStorage.getItem("names")?localStorage.getItem("names"):"";
pass.value = localStorage.getItem("pass")?localStorage.getItem("pass"):"";
box.checked = names.value&&pass.value;
box.onclick = function() {
if (box.checked) {
localStorage.setItem("names", names.value);
localStorage.setItem("pass", pass.value);
box.checked = true;
} else {
localStorage.removeItem("names");
localStorage.removeItem("pass");
}
}
}
</pre>
<h5>demo3,刷新頁面后之前寫的數(shù)據(jù)仍然存在</h5>
JavaScript:
<pre>
window.onload=function () {
var title=document.getElementsByName("title")[0];
var con=document.getElementsByName("con")[0];
var login=document.getElementById("login");

 if(sessionStorage.title||sessionStorage.con){
   title.value=sessionStorage.title;
   con.value=sessionStorage.con;
 }
 login.onclick=function  () {
    sessionStorage.title=title.value;
    sessionStorage.con=con.value;
 }
}

</pre>
HTML:
<pre>標(biāo)題:<input type="text" name="title">

內(nèi)容:<textarea rows=5 cols=15 name="con"></textarea>

<a href="test.php" id="login">登陸</a></pre>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末徘熔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子淆党,更是在濱河造成了極大的恐慌近顷,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宁否,死亡現(xiàn)場離奇詭異窒升,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)慕匠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進(jìn)店門饱须,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人台谊,你說我怎么就攤上這事蓉媳。” “怎么了锅铅?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵酪呻,是天一觀的道長。 經(jīng)常有香客問我盐须,道長玩荠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮阶冈,結(jié)果婚禮上闷尿,老公的妹妹穿的比我還像新娘。我一直安慰自己女坑,他們只是感情好填具,可當(dāng)我...
    茶點故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匆骗,像睡著了一般劳景。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碉就,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天盟广,我揣著相機(jī)與錄音,去河邊找鬼铝噩。 笑死衡蚂,一個胖子當(dāng)著我的面吹牛窿克,可吹牛的內(nèi)容都是我干的骏庸。 我是一名探鬼主播,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼年叮,長吁一口氣:“原來是場噩夢啊……” “哼具被!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起只损,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤一姿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后跃惫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叮叹,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年爆存,在試婚紗的時候發(fā)現(xiàn)自己被綠了蛉顽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,637評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡先较,死狀恐怖携冤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情闲勺,我是刑警寧澤曾棕,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站菜循,受9級特大地震影響翘地,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一子眶、第九天 我趴在偏房一處隱蔽的房頂上張望瀑凝。 院中可真熱鬧,春花似錦臭杰、人聲如沸粤咪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寥枝。三九已至,卻和暖如春磁奖,著一層夾襖步出監(jiān)牢的瞬間囊拜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工比搭, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留冠跷,地道東北人。 一個月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓身诺,卻偏偏與公主長得像蜜托,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子霉赡,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容