Introduction détaillée au stockage local en html5 (photo)

localstorage a deux types dans l'API du navigateur : localStorage et sessionStorage, qui existent dans l'objet window : localStorage correspond à window.localStorage, et sessionStorage correspond à window.sessionStorage. . Ensuite, cet article vous présentera les informations pertinentes sur le stockage local de html5. Les amis qui en ont besoin peuvent se référer à

API HTML<.>

Utilisez essentiellement la méthode

localStorage.setItem("b","isaac");//设置b为"isaac"
var b = localStorage.getItem("b");//获取b的值,为"isaac"
var a = localStorage.key(0); // 获取第0个数据项的键名，此处即为“b”
localStorage.removeItem("b");//清除b的值
localStorage.clear();//清除当前域名下的所有localstorage数据

portée

onglet du navigateur).

Durée de vie

quitter App, changer de réseau, mémoire insuffisante, etc. .) sont effacés.

Structure des données

type de données, simple mais facile à étendre. Tant que l'objet que vous souhaitez stocker dans le stockage local est converti en une chaîne dans une certaine méthode d'encodage, il peut être facilement pris en charge. Par exemple : convertissez l'objet en une chaîne json pour stocker l'objet ; convertissez la image en DataUrl (base64) pour stocker l'image. De plus, pour les types de données clé-valeur, la fonctionnalité « la clé est unique » est également très importante. Si vous attribuez la même clé à plusieurs reprises, la dernière valeur sera écrasée.

Délai d'expiration

function set(key,value){
  var curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
  var val = localStorage.getItem(key);//获取存储的元素
  var dataobj = JSON.parse(val);//解析出json对象
  if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  {
    console.log("expires");//提示过期
  }
  else{
    console.log("val="+dataobj.val);
  }
}

Limite de capacité

cookie est beaucoup plus grand, alors utilisez-le avec parcimonie.

Restrictions relatives aux noms de domaine

sécurité du navigateur, le stockage local ne peut pas traverser le domaine et ne peut pas non plus être utilisé. par sous-domaines Le nom de domaine hérite des données de stockage local du nom de domaine parent Ceci est assez différent des cookies.

Gestion des exceptions

Localstorage n'est pas complètement stable dans l'environnement de navigateur actuel et divers bugs peuvent survenir. Vous devez prendre en compte la gestion des exceptions. Personnellement, je pense que localstorage n'est qu'une méthode d'optimisation pour la localisation des ressources. L'utilisation de localstorage ne peut pas réduire la convivialité du programme. Je suis absolument opposé à la gestion des exceptions qui ne génère qu'un message d'erreur dans la console. La gestion des exceptions de stockage local utilise généralement try/catch pour intercepter/gérer les exceptions.

Comment tester si le navigateur actuel de l'utilisateur prend en charge le stockage local

La pratique courante actuelle consiste à détecter si window.localStorage existe, mais certains navigateurs Il y a des bugs Bien que localstorage soit "pris en charge", des bugs de bas niveau tels que l'impossibilité de setItem() peuvent même survenir dans le processus réel. Par conséquent, je suggère que vous puissiez juger si le navigateur prend en charge le stockage local en définissant/obtenant des données de test dans la structure try/catch pour voir s'il y a des exceptions. Bien sûr, n'oubliez pas de supprimer les données de test une fois le test terminé.

Compatibilité des navigateurs

Comment Débogage

Ressources - Panneau de stockage local et Ressources - Session dans les outils de développement Chrome Dans le panneau de stockage , vous pouvez voir les données de stockage local sous le nom de domaine actuel.

setItem() ne peut pas être répété sur les appareils iOS

De plus, un comportement étrange se produit parfois lors de la configuration de setItem() sur iPhone/iPad QUOTA_EXCEEDED_ERR erreur. Dans ce cas, généralement removeItem() avant setItem sera ok.

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!