HTML5 教程基础知识

HTML5 API

HTML5 Médias

HTML5 Graphiques

HTML 5 Base de données locale HTML5 Éléments sémantiques

HTML5 Stockage client

HTML5 Stockage client, une méthode de stockage local meilleure que les cookies. Utilisation de HTML5Les données de navigation des utilisateurs peuvent être stockées localement.

Qu'est-ce que HTML ?5 Stockage client Web ?

Utilisation de HTML5Les données de navigation des utilisateurs peuvent être stockées localement.

Plus tôt, le stockage local utilisait des cookies. Mais le stockage Web nécessite une sécurité et une rapidité accrues. Ces données ne sont pas stockées sur le serveur, mais sont utilisées uniquement pour les demandes de données du site Web de l'utilisateur. Elle peut également stocker de grandes quantités de données sans affecter les performances du site Web.

Les données sont stockées sous forme de clé/Les valeurs existent, les données des pages web ne permettent que l'accès et l'utilisation de cette page web.

Prise en charge du navigateur

Internet Explorer 8+, Firefox, Opera, Chrome et Safari prennent en charge le stockage web.

Attention : Internet Explorer 7 et les versions d'IE plus anciennes ne prennent pas en charge le stockage web.

localStorage et sessionStorage　

Les deux objets utilisés pour stocker des données client sont :

localStorage - Utilisé pour stocker longtemps les données de tout le site, les données stockées n'ont pas de date d'expiration, jusqu'à ce qu'elles soient supprimées manuellement.
sessionStorage - Utilisé pour stocker temporairement les données du même onglet (ou fenêtre), ces données seront supprimées après la fermeture de l'onglet ou de la fenêtre.

Avant d'utiliser le stockage web, il est recommandé de vérifier si le navigateur prend en charge localStorage et sessionStorage :

示例

if(typeof(Storage)!=="undefined")
{
　　　　//　Oui ! Le localStorage et les objets sessionStorage sont pris en charge.
　　　　//　Quelques lignes de code.....
} else {
　　　　//　Désolé ! Le stockage web n'est pas pris en charge.
}

Objet localStorage

Les données stockées dans l'objet localStorage n'ont pas de limitation de temps. Les données restent disponibles le lendemain, la deuxième semaine ou l'année prochaine.

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Site de tutoriels de base(oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "基础教程网";
　　document.getElementById("result").innerHTML = "Nom du site :"　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="Désolé, votre navigateur ne prend pas en charge le stockage web.";
}
</script>
</body>
</html>

Vérifiez et voyez‹/›

Analyse de l'exemple :

Créer une clé localStorage avec key="sitename" et value="基础教程网"./Paire de valeurs.
Recherche de la valeur de la clé "sitename" et insertion des données dans l'élément id="result".

L'exemple ci-dessus peut également être écrit ainsi :

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Site de tutoriels de base(oldtoolbag.com)</title>　
</head>
<body>
<script>
//　Stockage
localStorage.sitename = "基础教程网";
//　Recherche
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

Vérifiez et voyez‹/›

Retirer "sitename" de localStorage :

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Site de tutoriels de base(oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

Vérifiez et voyez‹/›

Que ce soit localStorage ou sessionStorage, les API disponibles sont les mêmes, les plus couramment utilisées sont les suivantes (par exemple pour localStorage) :

Enregistrer des données : localStorage.setItem(key,value);
Lire les données : localStorage.getItem(key);
Supprimer une donnée individuelle : localStorage.removeItem(key);
Supprimer toutes les données : localStorage.clear();
Obtenir une clé à un certain index : localStorage.key(index);

Astuce : Clé/Les valeurs sont généralement stockées sous forme de chaîne, vous pouvez les convertir au format de votre choix.

L'exemple suivant montre le nombre de fois où l'utilisateur a cliqué sur le bouton.

Conversion des valeurs de chaîne en type numérique du code :

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Site de tutoriels de base(oldtoolbag.com)</title>　　　　　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="Vous avez cliqué sur le bouton"　+　localStorage.clickcount　+　"次 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Désolé, votre navigateur ne prend pas en charge le stockage web.";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>Fermez l'onglet (ou la fenêtre) du navigateur, redémarrez cette page, le compteur continuera à compter (sans être réinitialisé).</p>
</body>
</html>

Vérifiez et voyez‹/›

L'objet sessionStorage

La méthode sessionStorage stocke des données pour une session. Les données sont supprimées lorsque l'utilisateur ferme la fenêtre du navigateur.

Comment créer et accéder à une sessionStorage :

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Site de tutoriels de base(oldtoolbag.com)</title>　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="Dans cette session, vous avez cliqué sur ce bouton"　+　sessionStorage.clickcount　+　"次 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

Vérifiez et voyez‹/›

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；

以下代码用于保存于查找数据：

save() 与 find() 方法

示例

//保存数据　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("添加成功");
}
//查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site　+　"的网址是："　+　sitename;　　
}

完整示例演示如下：

示例

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5本地存储之Web Storage篇</title>　　
</head>　　
<body>　　
　　　　<div style="border:　2px dashed #ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">网站名(key)：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">网　址(value)：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="新增记录"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">输入网站名：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="查找网站"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　载入所有存储在localStorage的数据
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//保存数据　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("添加成功");
　　　　}
　　　　//查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site　+　"的网址是："　+　siteurl;　　
　　　　}
　　　　//Extract all objects stored in localStorage and display them on the interface
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result　+="<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+="</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "数据为空……";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

Vérifiez et voyez‹/›

实现效果截图：

以上示例只是演示了简单的 localStorage 存储与查找，更多情况下我们存储的数据会更复杂。

接下来我们将使用 JSON.stringify 来存储对象数据，JSON.stringify 可以将对象转换为字符串。

示例

var site = new Object;
...
var str = JSON.stringify(site);　//　将对象转换为字符串

之后我们使用 JSON.parse 方法将字符串转换为 JSON 对象：

示例

var site = JSON.parse(str);

JavaScript 实现代码：

save() 与 find() 方法

示例

//保存数据　　
function save(){　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　将对象转换为字符串
　　　　localStorage.setItem(site.keyname,str);　　
　　　　alert("保存成功");
}　　
//查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site　+　”的网站名是：　+　site.sitename　+　”，网址是：　+　site.siteurl;　　
}

完整示例如下：

示例

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5本地存储之Web Storage篇</title>　　
</head>　　
<body>　　
　　　　<div style="border:　2px dashed #ccc;width:320px;text-align:center;">
　　　　　　　　<label for="keyname">别名(key):</label>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="sitename">网站名：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">网　址：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="新增记录"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">输入别名(key)：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="查找网站"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//保存数据　　
　　　　function save(){　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　将对象转换为字符串
　　　　　　　　localStorage.setItem(site.keyname,str);　　
　　　　　　　　alert("保存成功");
　　　　}　　
　　　　//查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site　+　”的网站名是：　+　site.sitename　+　”，网址是：　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//Extract all objects stored in localStorage and display them on the interface
　　　　//　Assure that the value corresponding to the stored keyname is a conversion object, otherwise JSON.parse will report an error
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result　+="<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+="</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "Les données sont vides...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

Vérifiez et voyez‹/›

La méthode loadAll de l'exemple a affiché toutes les données stockées. Vous devez vous assurer que les données stockées dans localStorage sont au format JSON, sinon JSON.parse(str) affichera une erreur.

Démonstration des résultats de sortie :

HTML 5 Base de données locale HTML5 Éléments sémantiques