html5本地儲存web storage的簡單使用

html5的乙個非常cool的功能，就是web storage，類似於之前的cookie，不過與之不同的是，web storage 擁有本地5兆的容量可以儲存，而cookie卻只有4k，這是完全不能比的優勢。

webstrange又分為：localstorage，sessionstorage和本地資料庫。

接下來我就來一一介紹：

1 localstorage

localstorage 的使用比較簡單，方法有：

localstorage.setitem(key,value);//儲存資料

localstorage.getitem(key);//讀取資料
localstorage.removeitem(key);//刪除單個資料
localstorage.clear();//刪除所有資料
key：localstorage.key(index);//得到某個索引的值

乙個小demo來展示功能：

1 (function

($);
5var array=this
.serializearray();
6var str=this
.serialize();
7             $(array).each(function
()else
14                 }else
17});
18return
serializeobj;
19};
2021
var storagefile =json.parse(window.localstorage.getitem('demo'));
22         $.each(storagefile, function
(i, val));
2526         $('#demoform').find('[type="submit"]').on('click', function
());
31});
32 })(jquery)

html **：

1

doctype html
>
2<
html 
lang
="zh"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
script 
src="jquery-1.10.2.min.js"
>
script
>
6<
script 
src="demo.js"
>
script
>
7<
title
>document
title
>
8head
>
9<
body
>
10<
form 
id="demoform"
>
11<
p><
label
><
span
>姓名
span
><
input 
name
="name"
>
label
>
p>
12<
p><
label
><
span
>年齡
span
><
input 
name
="age"
>
label
>
p>
13<
p><
label
><
span
>學號
span
><
input 
name
="number"
>
label
>
p>
14<
p><
label
><
span
>位址
span
><
input 
name
="address"
>
label
>
p>
15<
p><
label
><
span
>愛好
span
><
input 
name
="habit"
>
label
>
p>
16<
p><
label
><
span
>其他
span
><
textarea 
name
="big"
id=""
cols
="30"
rows
="10"
>
textarea
>
label
>
p>
17<
p><
input 
type
="submit"
value
="提交"
>
p>
18form
>
19body
>
20html
>

這樣，乙個簡單的展示localstorage 的 demo就實現了

2 sessionstorage

sessionstorage用法與localstorage用法相同，不過sessionstorage在瀏覽器關閉**時候就會清除，而localstorage會一直儲存至瀏覽器中，二者酌情配合使用。

3 本地資料庫

熟悉ios/android開發的同學，應該會對sqlite資料庫比較熟悉

html5中對資料庫的操作比較簡單，主要有opendatabase方法和transaction方法

用乙個物件db來接收opendatabase建立的訪問資料庫的物件

1

var db = opendatabase(databasename,version,description,size)

其中databasename:資料庫名

version：資料庫版本 可不填

desription：資料庫描述

size：資料庫分配空間大小

transaction方法用乙個**函式作為引數，在函式中執行具體的訪問資料庫的方法

1 db.transaction(function

(tx)));

executesql方法的四個引數分別是：

HTML5本地儲存

align center html5本地儲存 align b 1.1概述 b html5 儲存是基於鍵值對的。資料儲存在乙個鍵裡，訪問資料時可以根據同樣的鍵獲得上次儲存的資料。鍵是乙個字串。而資料則可以是任何型別的js基本資料型別，包括字串，boolean，整數，和浮點數。需要注意的是，這些資料在儲...

html5 本地儲存

前言 最近在做專案時遇到了需要將資料儲存在使用者瀏覽器本地的需求，經過查詢了解到了web storage，通過學習初步掌握了web storage，以下是一些關於web storage的知識和用法，記憶力較差發布在csdn備忘。1 什麼是html5本地儲存？通過web storage web應用程式...

html5 本地儲存

最近一直在學習 html5，為了後期的專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法，今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣，下面就以localstorage為例。早期我們都是使用cookie...