Maison > interface Web > Tutoriel H5 > Comment utiliser le stockage HTML5-Web ?

Comment utiliser le stockage HTML5-Web ?

PHP中文网
Libérer: 2017-06-20 10:30:35
original
1519 Les gens l'ont consulté

Le stockage Web, une meilleure méthode de stockage local que les cookies

localStorage et sessionStorage

 localStorage -stockage de données sans limite de temps

 sessionStorage-stockage de données pour une session

//是否支持if(typeof(Storage)!=="undefined")
{// 是的! 支持 localStorage  sessionStorage 对象!// 一些代码.....} else {// 抱歉! 不支持 web 存储。}
Copier après la connexion

objet localStorage

Il n'y a pas de limite de temps pour les données stockées dans l'objet localStorage

localStorage.sitename="小南瓜";
document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;
Copier après la connexion

Qu'il s'agisse de localStorage ou de sessionStorage, les API disponibles sont les mêmes que celles couramment utilisées. comme suit : (en prenant localStorage comme exemple) :

保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
Copier après la connexion

Astuce : Les paires clé/valeur sont généralement stockées sous forme de chaînes, vous pouvez convertir ce format en fonction à vos besoins.

if(typeof(Storage)!=="undefined")
{
  if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
  else
  {
  localStorage.clickcount=1;
  }
  document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}
Copier après la connexion

objet sessionStorage

SessionStorage stocke les données d'une session. Les données seront supprimées lorsque l'utilisateur fermera la fenêtre du navigateur

   if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉,您的浏览器不支持 web 存储";
    }
Copier après la connexion

Programme simple de liste de sites Web

 <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 sitename = localStorage.getItem(search_site);  var find_result = document.getElementById("find_result");  
        find_result.innerHTML = search_site + "的网址是:" + sitename;  
    }//将所有存储在localStorage中的对象提取出来,并展现到界面上function loadAll(){  var list = document.getElementById("list");  if(localStorage.length>0){  var result = "<table border=&#39;1&#39;>";  
            result += "<tr><td>网站名</td><td>网址</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;  
        }else{  
            list.innerHTML = "数据为空……";  
        }  
    }      </script>
Copier après la connexion

Résultats d'exécution :

JSON.stringify

Stockez les données de l'objet et convertissez l'objet en chaîne

var site = new Object;
...var str = JSON.stringify(site); // 将对象转换为字符串
Copier après la connexion

JSON.parse

Convertir une chaîne en objet JSON

 <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;  
    }  
    //将所有存储在localStorage中的对象提取出来,并展现到界面上// 确保存储的 keyname 对应的值为转换对象,否则JSON.parse会报错function loadAll(){  var list = document.getElementById("list");  if(localStorage.length>0){  var result = "<table border=&#39;1&#39;>";  
            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;  
        }else{  
            list.innerHTML = "数据为空...";  
        }  
    }  </script>
Copier après la connexion

Ce qui précède est le résultat de la conversion JSON.stringify

Ce qui suit est le résultat de la conversion JSON.parse

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal