什么是HTML Web Storage
Web Storage是HTML5的新特性,通过Web Storage,用户可以实现在浏览器本地存储数据。
在HTML5之前,本地数据存储是通过cookie的方式实现的,这么做存在两个缺点:一是cookie中所能存的数据容量是有限的,二是cookie总是附加在对服务器的请求中,每次请求时都要带上这些无需传输给服务器的数据,从而影响了请求效率。
Web Storage则解决了这样的问题,其存储上限要更大(上限最小可达5MB)并且存储在本地的信息不会再附加在对服务器的请求中。
HTML Web Storage对象
HTML Web Storage对象有两种,分别是window.sessionStorage
和window.localStorage
。存储方式均是通过键值对进行存储。通过名字可以看出,一个是基于session的,一个是不基于session的。
基于session的window.sessionStorage
当session结束(关闭浏览器标签页)后存储的数据就被删除了;不基于session的window.localStorage
当session结束后数据并不会被删除,而是保存在了计算机上,除非手动清理掉。所以当建立访问该站点的新session后仍然可以使用这些数据。当然,这里的“可以使用”仅限于和存储时的同一站点才行。
因为Web Storage中数据是按照来源(包括domain和协议)存储的,同一个来源的所有页面均可以存储和使用相同的数据。
localStorage对象
使用举例如下:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
//Remove
localStorage.removeItem("lastname");
注意:键值对以字符串形式存储,所以要以其他类型使用的话应进行类型转换。
sessionStorage对象
使用举例如下:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
网友评论