快速理解webStroage
Posted vmanas
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速理解webStroage相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <fieldset id=""> <legend>sessionStorage</legend> <input type="text" name="" id="txt1" value="" /> <br /> <input type="button" name="save1" id="save1" value="保存数据" /> <input type="button" name="get1" id="get1" value="读取数据" /> <input type="button" name="del1" id="del1" value="删除数据" /> </fieldset> <fieldset id=""> <legend>localStorage</legend> <input type="text" name="" id="txt2" value="" /> <br /> <input type="button" name="save2" id="save2" value="保存数据" /> <input type="button" name="get2" id="get2" value="读取数据" /> <input type="button" name="del2" id="del2" value="删除数据" /> </fieldset> </body> <script type="text/javascript"> document.getElementById("save1").onclick = function(){ var sinput = document.getElementById("txt1").value; sessionStorage.setItem("session1",sinput); } document.getElementById("get1").onclick = function(){ var con = sessionStorage.getItem("session1"); var str = document.createElement("span"); str.innerHTML = con; document.getElementsByTagName("fieldset")[0].appendChild(str); } document.getElementById("del1").onclick = function(){ sessionStorage.removeItem("session1"); document.getElementsByTagName("fieldset")[0].getElementsByTagName("span")[0].innerHTML="" } document.getElementById("save2").onclick = function(){ var sinput = document.getElementById("txt2").value; localStorage.setItem("local1",sinput); } document.getElementById("get2").onclick = function(){ var con = localStorage.getItem("local1"); var str = document.createElement("span"); str.innerHTML = con; document.getElementsByTagName("fieldset")[1].appendChild(str); } document.getElementById("del2").onclick = function(){ localStorage.removeItem("local1"); document.getElementsByTagName("fieldset")[1].getElementsByTagName("span")[0].innerHTML="" } </script> </html>
Web Storage功能，就是在Web上存储数据，分为两种：
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到该网站所有域名被关闭所经过的这段时间，session对象可用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可用
区别：sessionStorage为临时保存，localStorage为永久保存。
HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象。
sessionStroage的用法和localStroage的用法一样，在存储数据的过程中，所有数据全部以字符串类型保存。
存取对象时用Json.stringfy()方法将对象转换成字符串
var str = {
age:12,
name:"sa"
}
str=JSON.stringify(str);
localStorage.setItem("obj",str);
将字符串转换成对象用JSON.parse()方法
console.log(JSON.parse(localStorage.getItem("obj")))
以上是关于快速理解webStroage的主要内容，如果未能解决你的问题，请参考以下文章