sessionStorage与localStorage

web应用中的数据可以保存在两个地方，一个是web客户端（用户计算机），一个就是web服务器。

在h5之前，本地存储就只有cookie一种，但如今web存储分为两种，分别对应两个javascript对象。

1.sessionstorage与localStorage区别：

a.本地存储：对应localStorage对象，用来长期保存网站的数据，并且站内的页面都可以访问该数据，如果用户想要删除数据的话，浏览器一般会提供三种机制，当然，这要看何种浏览器了。

• 多数浏览器都会提供一种清除机制，让用户可以清除本地数据空间的数据。
• 有些浏览器会提供一些命令使得用户要么不删要么全都要删除，因为这些浏览器是将本地存储与cookie放在一起的，因此清除本地存储就必须清除cookie。
• 还有一些浏览器会让用户按照站点检查数据，有选择性的去删除数据。

b.会话存储：对应sessionStorage对象，用于保存一个临时的页面数据，在用户关闭窗口或者标签之前数据是存在的，但是在关闭之后数据便会被浏览器自动的删除。

从页面代码来看，本地存储与会话存储的操作是完全相同的，他们的区别只是在存储数据的寿命的长短不同而已。

2.存取数据

要把一段信息保存在会话存储中，首先要为这个数据起个名字，这个名字就叫做键，用于唯一标志这条数据。

要保存数据就要使用setItem（）方法。

例如，如果你想将文本框中的数据保存下来，就改这没写：

var nameInput = docunment.getElementById("username");
localStorage.setTlem("user_name",nameInput.value);

要读取本地存储的数据和保存数据是一样的简单，用到的方法是getItm（）方法。

例如，如果你想将方才存进去的数据取出来，然后通过弹框显示出来。

if(localStorage.getItem("user_name")==null){//判断某个键的值是否为空；
    alert("你进去的数据为空!");
}
else{
    document.getElementById("username").value = localStorage.getItem("user_name");
}

会话存储也是一样的，唯一的区别便是一个是sessionStorage对象，一个是localStorage对象。

注意：没有web服务器是不能使用web存储的。

• 在IE中完全不支持web存储，因为其localStorage与sessionStorage对象不见了，访问它的js代码时，便会报错。
• 在Firefox中，localStorage与sessionStorage对象还在，但是任何关于数据的读写操作都是静静的失败。
• 在Chrome中，多数的web存储功能都是能实现的，只有少数功能（如onStorage事件）会失效。

除此之外，web存储还有一个最为重要的细节，那就是通过localStorage与sessionStorage保存数据时，该数据会被自动的转化为文本字符串，对于原就是文本的当然不会有影响，但是对于数值的数据就会有影响。。

比如在游戏中想要保留游戏结束时的位置，即坐标值时，就会遇到问题，如果你保存的为文本“35”，之后又给“35”加了个“5”，最后的结果就变成了“355”而不是你想要的“35+5”，这个数值的改变，既有可能让你的游戏出现大的位置差错等。

解决的办法当然是有的：比如使用Number（）函数就很好。
如：

x = Number(localStorage.getItem("mazegame_currentX"));
X+=5;//如此一来js就会正确的计算出35+5，返回40；

3.删除，查找所有数据项

• 删除：
  删除数据项是很简单的，只需要调用removeItem（)方法，再传入键名，就可以删除你不想要的数据项了: localStorage.removeItem(“user_name”);

  或者就使用更加厉害的clear（）方法，将本地存储的会话数据全部清空：sessionStorage.removeItem（”user_name”）;

• 查找所有项：
  想要查找所有的数据项，大可以不必知道所有数据的键名，如此也可以查到，使用key（）方法就可以，或者，如果你想知道这个页面都保存了那些数据，或者都是使用的什么键名的时候也可以用这个方法。

  例如：

function findAllItem(){
    var itemList = document.getElementById("itemList");
    //取得用于保存数据项的<ul>元素
    itemList.innerHTML = "";//清楚列表；
    for(var i=0;i<localstorage.length;i++){
    //遍历所有数据项
    var key = localStorage.key(i);//取得当前数据项的键；
    var item = localStorage.getItem(key);//取得以该键保存的数据值
    //用以上数据创建一个列表项
    //添加到页面中
    var newItem = document.createElement("li");
    newItem.innerHTML = key+";"+item;
    itemList.appendChild(newItem);
    }
}

4.其他方法

• getFullYear（）：创建年份对象。
• getMonth（）：创建月份对象。
• getDate（）：创建天数对象。
• JSON.stringify（）：可以把对象连同其数据转化为文本形式。
• JSON.parse（）：则是把文本转化为对象。