web本地存储基础知识

HTML5之前的使用本地存储

在html5之前，本地存储使用的时cookie,他的使用场景如下：

1. 浏览器获取一个web页面，比如从“pets-R-us.com”获取页面，服务器可以相应发送一个cookie，Cookie中包一个或多个键值对。例如：

Cookie: pet=dog; age=5; color=black;

2. 下次浏览器向“pets-R-us.com”发出请求时，他会随请求同时发送之前收到的cookie
3. 服务器可以使用cookie实现个性化的体验，在这里就是向用户推荐一些相关商品，不过cookie还有很多其他的用法，比如定制用户体验，存储数据，维护游戏状态等。

注意：cookie与一个域关联，如“pets-R-us.com”，而且只能发送给这个域

缺点

• 只有4k空间使用，我的应用需要更多的存储空间。
• 每次都要来回发送cookie,这看起来很低效，特别是使用移动设备，消耗宽带
• 使用cookie很容易向浏览器传送病毒和其他恶意软件

HTML5中使用本地存储

HTML5为我们提供了一个很棒也很简单的Javascript API，可以在浏览器中存储要持久存储的键值对。他会为浏览器每个域分配5到10M的存储空间。应用场景如下：

1. 页面可以在浏览器的本地存储中存储一个或多个键值对。
2. 然后用键来获取相应的值。也可以把本地存储的数据发送给服务器，完成一些服务器计算。

使用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)