五、HTML5存储

5.1 存储

存储是前端仓库的意思

HTML5新增了一个存储对象用于存储数据

每一个网站分配一个

只要浏览器不卸载，电脑不崩溃，就永远存在

它的生命周期是永久的

存储容量： 5M

存储数据

localStorage.setItem(key, value);

获取数据

localStorage.getItem(key);

删除某一项

localStorage.removeItem();

删除全部

localStorage.clear();

var a = 10;
// 全局变量 a 的生命周期是从页面开启到关闭
// 虽然刷新之后仍然能看到 a ，但是与上一个 a 不是同一个，而是重新定义出来的
// HTML5新增了一个存储对象 localStorage 用来存储内容
// 查看
console.log(localStorage);

现在该对象中没有任何内容

既然是一个对象，可以使用对象的语法添加内容

比如：

localStorage.a =10;
localStorage[“b”] = 20;

因为该对象中的原型上提供了相应的API，所以建议我们使用原型上的方法：

使用方式：

localStorage.setItem(key, value)
        key：表示数据名称
        value：存储的数据（该方法会默认转为字符串）

比如：

存储数字：

localStorage.setItem(“age”, 11);

存储数组：

localStorage.arr = [1, 2, 3, 4];
localStorage.setItem("arr", [5, 6, 7, 8]);

存储对象：

localStorage.obj = {}
localStorage.obj = {c: 1, d: 2}

解决方案：

在存储的时候先转为字符串，提取的时候再转为原类型

// 定义一个对象
var obj = {
    name: "老王",
    age: 11,
    sex: "男"
}
// 因为我们知道要存储数据了，所以先转为字符串
// var str = JSON.stringify(obj);
// console.log(str);  // "{"name":"老王","age":11,"sex":"男"}"
localStorage.setItem("obj", JSON.stringify(obj));
// 提取,转为对象
var obj1 = JSON.parse(localStorage.getItem("obj"));

5.2 本地存储API

存储数据

localStorage.setItem(key, value);
        key：存储的数据名称
        value：要存储的数据
        该方法会默认转为字符串

获取数据

localStorage.getItem(key);
        key：要获取的数据名称
        返回值：字符串

删除某一项

localStorage.removeItem(key);
	key：要删除的数据名称

删除全部

localStorage.clear();

5.3 会话存储

除了本地存储，还有一个对象叫做会话存储

对象名称：sessionStorage

与本地存储的区别就是生命周期

本地存储的生命周期：永久
会话存储的生命周期：页面打开到页面关闭

其他的API是一样的

查看：

console.log(sessionStorage);