HTML5之前的使用本地存储
在html5之前,本地存储使用的时cookie,他的使用场景如下:
- 浏览器获取一个web页面,比如从“pets-R-us.com”获取页面,服务器可以相应发送一个cookie,Cookie中包一个或多个键值对。例如:
Cookie: pet=dog; age=5; color=black;
- 下次浏览器向“pets-R-us.com”发出请求时,他会随请求同时发送之前收到的cookie
- 服务器可以使用cookie实现个性化的体验,在这里就是向用户推荐一些相关商品,不过cookie还有很多其他的用法,比如定制用户体验,存储数据,维护游戏状态等。
注意:cookie与一个域关联,如“pets-R-us.com”,而且只能发送给这个域
缺点
- 只有4k空间使用,我的应用需要更多的存储空间。
- 每次都要来回发送cookie,这看起来很低效,特别是使用移动设备,消耗宽带
- 使用cookie很容易向浏览器传送病毒和其他恶意软件
HTML5中使用本地存储
HTML5为我们提供了一个很棒也很简单的Javascript API,可以在浏览器中存储要持久存储的键值对。他会为浏览器每个域分配5到10M的存储空间。应用场景如下:
- 页面可以在浏览器的本地存储中存储一个或多个键值对。
- 然后用键来获取相应的值。也可以把本地存储的数据发送给服务器,完成一些服务器计算。
使用web storage API来存取数据
//存数据
localStorage.setItem("sticky_0", "pick up dry cleaning");
//取数据,本地并没有删除,只是得到对应指定键的值
localStorage.getItem("sticky_0");
也可以把localStorage对象看做一个关联数组,不使用setItem方法,而是像下面这样为键赋一个值:
//存储
localStorage["sticky_0"] = "Pick up dry cleaning";
//获取
var sticky = localStorage["sticky_0"];
通过属性length属性和key属性,来操作localStorage
- length属性包含本地存储中的数据项数。
- key属性是获取localStorage中的键值。
例如:
for(var int = 0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
alert(value);
}
清除域中所有的本地存储
localStorage.clear();
使用API来判断是否支持Web Storage
if(window["localStorage"]) {
//your localStorage code here...
}
注意: 使用localStorage,只能使用字符串作为键和值,假如你需要存储整数5,可以存储字符串“5”,也可以使用
localStorage.setItem("numitems", 1);
看起来这里像是存储的一个整数,不过是Javascrit知道这必须是一个字符串,所以它会帮你将整数转换为一个字符串,其实存储的还是“1”。但是获取的时候需要手动的把他从字符串转化为整数
var numItems = parseInt(localStorage.getItem("numitems"));
sessionStorage存储,数据项只会在浏览器会话期间存储,一旦会话结束,本地存储的数据项就会被删除。
- 字符串转化为整数使用
parseInt
- 字符串转化为float类型
parseFloat
- 数组转化为json字符串
JSON.stringify(arr)
- json串转化为数组
JSON.parse(jsom)
网友评论