H5中的本地存储

什么是本地存储?

HTML5提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储 （持久化本地）

sessionStorage - 针对一个 session 的数据存储 （内存方式存储）

它可以把一些信息存在本地(客户)端，一种让网页可以把键值对存储在用户浏览器客户端的方法。

它有哪些特点了？

　　 localStorage是没有失效时间的，数据便一直存储在用户的客户端中,不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。

　　 在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。

为什么要学习本地存储？

cookie的缺陷是非常明显的

1、数据大小：作为存储容器，cookie的大小限制在4KB。

2、对于现在复杂的业务逻辑需求，4KB的容量除了存储一些配置字段还简单单值信息，对于绝大部分开发者来说真的不知指望什么了。

3、安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。

4.、网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。

5、localstorage是移动开发必不可少的技术点。

怎样检测浏览器是否支持本地存储?

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。只要window.localStorage返回值为true，则浏览器支持本地存储。代码如下：

window.onload = function() {
    if(window.localStorage) {
        alert('支持');
    } else {
        alert('不支持');
    }
}

LocalStore的API

length	唯一的属性，只读，用来获取storage内的键值对数量
key	根据index获取storage的键名
getItem	根据key获取storage内的对应value
setItem	为storage内添加键值对
removeItem	根据键名，删除键值对
clear	清空storage对象

window.onload = function() {
    //1、获取本地存储对象
    var ls = window.localStorage;
    //2、往本地存储中存储数据
    ls.setItem("name", "TV");
    //3、获取本地存储的数据个数
    console.log(ls.length);
    //4、获取本地存储中健对应的值
    console.log(ls.getItem("name"));
    //5、遍历本地存储中健值对
    for(var i = 0; i < ls.length; i++) {
        alert("key:" + ls.key(i) + "   value:" + ls.getItem(ls.key(i)));
    }
    //6、清除本地存储中所有的数据
    ls.clear();
    //7、清除本地存储中指定的数据
    ls.removeItem("counts");
}

 

存储JSON数据

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用JSON来处理，可以直接调用JSON.stringify()将其转为字符串，读取出来后调用JSON.parse()将字符串转为json格式。

/**
 * 定义json对象
 */
var stu1 = {
    'name': 'dream',
    'age': 32,
    'password': '123456'
};
/**
 * 把json对象转换成字符串进行存储
 * JSON.stringify() json转换字符串
 */
localStorage.setItem("stu1", JSON.stringify(stu1));
// 存放到sessionStorage中
sessionStorage.setItem("stu1", JSON.stringify(stu1));
/**
 * 读取JSON数据
 * 先把字符串转换成json 在进行取值
 */
var stu = JSON.parse(localStorage.getItem("stu1"));
console.log(stu.name);
// 从session中读取
var stuSession = JSON.parse(sessionStorage.getItem("stu1"));
console.log(stuSession.name);