HTML5本地存储 LocalStorage和SessionStorage

    xiaoxiao2021-03-25  79

    了解HMLT5的同学,对本地存储的强大功能应该都不会陌生,因为它比之前的cookie和session实在是好用太多了。。。

    Cookies的用法相对比较麻烦,并且还有个致命的弱点,就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。所以html5中本地存储的出现也算是程序员的福音啦。

    好了,废话不多说了,直接上干货:

    HTML5中本地存储分为sessionStorage 和 localStorage,二者的区别: sessionStorage数据的存储在某个会话中,也就是说当浏览器关闭后重新打开这个页面时,之前的保存已经被清除。而localStorage 是一个持久化的存储,它会一直存在,除非手动删除。

    sessionStorage和localStorage可以通过数据遍历操作存储的数据,例如:

    var storage = window.localStorage; for (var i=0; i < storage.length; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); } 本地存储的具体使用:

    第一步:检测浏览器是否支持本地存储,这里以localStorage为例

    if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }第二步:异常简化的读取、写、删除等操作

    localStorage.a = 3;//设置a为"3" localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值 localStorage.setItem("b","isaac");//设置b为"isaac" var a1 = localStorage["a"];//获取a的值 var a2 = localStorage.a;//获取a的值 var b = localStorage.getItem("b");//获取b的值 localStorage.removeItem("c");//清除c的值 推荐使用方便好用的操作方法: getItem()和setItem(), 清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。

    PS:HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。

    转载请注明原文地址: https://ju.6miu.com/read-33460.html

    最新回复(0)