HTML5本地存储 LocalStorage和SessionStorage

拼搏现实的明天。 2022-09-28 13:25 248阅读 0赞

了解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本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。