HTML5 Tutorial Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML 5 Banco de Dados Local HTML5 Elementos Semânticos

HTML5 Armazenamento no cliente

HTML5 Armazenamento no cliente, uma maneira melhor de armazenamento local do que cookies. Usando HTML5Os dados de navegação do usuário podem ser armazenados localmente.

O que é HTML5 Armazenamento no cliente do Web?

Usando HTML5Os dados de navegação do usuário podem ser armazenados localmente.

Antes disso, o armazenamento local usava cookies. Mas o armazenamento Web precisa de mais segurança e rapidez. Esses dados não são armazenados no servidor, mas são usados apenas para solicitações de dados do site do usuário. Também pode armazenar uma grande quantidade de dados sem afetar o desempenho do site.

Os dados são armazenados com chave/Existem pares de valores, os dados da página web só permitem que a página acesse e use.

Suporte do navegador

Internet Explorer 8+, Firefox, Opera, Chrome e Safari suportam armazenamento web.

Atenção: Internet Explorer 7 E as versões do IE mais antigas não suportam armazenamento web.

localStorage e sessionStorage　

Os dois objetos de armazenamento de dados do cliente são:

localStorage - Usado para armazenar dados do site por um longo tempo, os dados armazenados não têm data de expiração, até que sejam removidos manualmente.
sessionStorage - Usado para armazenar temporariamente dados na mesma janela (ou aba), esses dados serão excluídos após fechar a janela ou aba.

Antes de usar o armazenamento web, verifique se o navegador suporta localStorage e sessionStorage:

Example

if(typeof(Storage)!=="undefined")
{
　　　　//　Sim! Suporta localStorage e sessionStorage.
　　　　//　Alguns códigos.....
} else {
　　　　//　Desculpe! Não há suporte para armazenamento web.
}

Objeto localStorage

Os dados armazenados no objeto localStorage não têm limite de tempo. No dia seguinte, na segunda semana ou no próximo ano, os dados ainda estarão disponíveis.

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "基础教程网";
　　document.getElementById("result").innerHTML = "Nome do site:";　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="Desculpe, seu navegador não suporta armazenamento web.";
}
</script>
</body>
</html>

Teste e Veja ‹/›

Análise de exemplo:

Criar uma chave localStorage com key="sitename" e value="基础教程网"./Par
Procurar o valor com o chave "sitename" e inserir os dados no elemento com id="result".

O exemplo acima também pode ser escrito assim:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<script>
//　Armazenar
localStorage.sitename = "基础教程网";
//　Procurar
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

Teste e Veja ‹/›

Remover "sitename" do localStorage:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

Teste e Veja ‹/›

Independentemente do localStorage ou sessionStorage, os APIs disponíveis são os mesmos, os mais comuns são os seguintes (tomando localStorage como exemplo):

Salvar dados: localStorage.setItem(key,value);
Ler dados: localStorage.getItem(key);
Excluir dados individuais: localStorage.removeItem(key);
Excluir todos os dados: localStorage.clear();
Obter a chave de um índice específico: localStorage.key(index);

Dica: Chave/Os valores são geralmente armazenados como strings, você pode convertê-los para o formato que precisar.

O exemplo a seguir mostra a quantidade de vezes que o usuário clicou no botão.

Conversão de valores de string para tipo de número no código:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial Website(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="Você clicou no botão ""　+　localStorage.clickcount　+　" 次数 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Desculpe, seu navegador não suporta armazenamento web.";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>Feche a aba (ou janela) do navegador, abra esta página novamente e o contador continuará a contar (não será resetado).</p>
</body>
</html>

Teste e Veja ‹/›

Objeto sessionStorage

O método sessionStorage armazena dados para uma sessão específica. Quando o usuário fecha a janela do navegador, os dados são excluídos.

Como criar e acessar um sessionStorage:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial Website(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="Nesta sessão, você clicou no botão ""　+　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>

Teste e Veja ‹/›

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

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

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

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

save() and find() methods

Example

//Salvar dados　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("添加成功");
}
//Procurar dados　　
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;　　
}

完整示例演示如下：

Example

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Local Storage Web Storage Tutorial</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="Add Record"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">输入网站名：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Search Website"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　载入所有存储在localStorage的数据
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//Salvar dados　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("添加成功");
　　　　}
　　　　//Procurar dados　　
　　　　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;　　
　　　　}
　　　　//Extrair todos os objetos armazenados no localStorage e exibi-los na 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 = "No data...";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

Teste e Veja ‹/›

Screenshot of Implementation Effect:

The above example only demonstrates simple localStorage storage and search, in more cases, the data we store will be more complex.

Next, we will use JSON.stringify to store object data, which can convert an object to a string.

Example

var site = new Object;
...
var str = JSON.stringify(site);　//　Converter objeto para string

Then we use the JSON.parse method to convert the string to a JSON object:

Example

var site = JSON.parse(str);

JavaScript Implementation Code:

save() and find() methods

Example

//Salvar dados　　
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);　//　Converter objeto para string
　　　　localStorage.setItem(site.keyname,str);　　
　　　　alert("Salvo com sucesso");
}　　
//Procurar dados　　
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　+　“O nome do site é:”　+　site.sitename　+　“， o URL é:”　+　site.siteurl;　　
}

Complete example as follows:

Example

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Local Storage Web Storage Tutorial</title>　　
</head>　　
<body>　　
　　　　<div style="border:　2px dashed #ccc;width:320px;text-align:center;">
　　　　　　　　<label for="keyname">Alias(key): </label>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="sitename">Website Name: </label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">Website URL: </label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="Add Record"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">Enter alias(key): </label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Search Website"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//Salvar dados　　
　　　　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);　//　Converter objeto para string
　　　　　　　　localStorage.setItem(site.keyname,str);　　
　　　　　　　　alert("Salvo com sucesso");
　　　　}　　
　　　　//Procurar dados　　
　　　　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　+　“O nome do site é:”　+　site.sitename　+　“， o URL é:”　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//Extrair todos os objetos armazenados no localStorage e exibi-los na interface
　　　　//　Certifique-se de que o valor correspondente a keyname armazenado está no objeto de conversão, senão JSON.parse emitirá um erro
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>Alias</td><td>Nome do site</td><td>URL</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 = "Os dados estão em branco...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

Teste e Veja ‹/›

O loadAll do exemplo escreveu todos os dados armazenados, você precisa garantir que os dados armazenados no localStorage sejam no formato JSON, caso contrário, JSON.parse(str) emitirá um erro.

Demonstração de Resultados de Saída:

HTML 5 Banco de Dados Local HTML5 Elementos Semânticos