html5的本地存储

来源：互联网发布：科比历年总决赛数据编辑：程序博客网时间：2024/05/20 11:24

学习一下html5的本地存储

首先是–localStorage
知识要点：
localStorage - 没有时间限制的数据存储,以键值对的形式存在，键/值对通常以字符串存储，你可以按自己的需要转换该格式

浏览器支持情况：Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储；

存储数据的方法：直接给localStorage赋于属性例如：localStorage.name = “xiaoming”;或者：localStorage[“name”]=”xiaoming”;具体的读取，写，删除方法如下：

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的值
localStorage.clear();//清除所有键值对

HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：

function showStorage(){        for(var i=0;i<localStorage.length;i++){            //key(i)先获得对应的键，getItem(localStorage.key(i)) 取得对应的值            document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br>");        }    }  showStorage();

–sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除:

function session(){        if(sessionStorage.count){            sessionStorage.count = Number(sessionStorage.count)+1;        }else{            sessionStorage.count = 1;        }        document.write("sessionStorage:"+sessionStorage.count);    }    session();

再来说一下和cookie的区别：

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

测试代码：

<body>    <p>访问的次数:<span></span></p></body><script>    function go(){        if(localStorage.pagecount){            localStorage.pagecount=Number(localStorage.pagecount)+1;        }else{            localStorage.pagecount=1;        }        document.getElementsByTagName("span")[0].innerHTML = localStorage.pagecount;    }    // go();    // localStorage.clear();  清除所有localStorage;    function showStorage(){        for(var i=0;i<localStorage.length;i++){            //key(i)先获得对应的键，getItem(localStorage.key(i)) 取得对应的值            document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i))+"<br>");        }    }    // showStorage();    function session(){        if(sessionStorage.count){            sessionStorage.count = Number(sessionStorage.count)+1;        }else{            sessionStorage.count = 1;        }        document.write("sessionStorage:"+sessionStorage.count);    }    session();</script>

0 0