H5中的本地存储

什么是本地存储?

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

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

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

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

它有哪些特色了？

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

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

为何要学习本地存储？

cookie的缺陷是很是明显的

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

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

三、安全性问题：因为在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题仍是很大的。

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

五、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() {
    //一、获取本地存储对象
    var ls = window.localStorage;
    //二、往本地存储中存储数据
    ls.setItem("name", "TV");
    //三、获取本地存储的数据个数
    console.log(ls.length);
    //四、获取本地存储中健对应的值
    console.log(ls.getItem("name"));
    //五、遍历本地存储中健值对
    for(var i = 0; i < ls.length; i++) {
        alert("key:" + ls.key(i) + "   value:" + ls.getItem(ls.key(i)));
    }
    //六、清除本地存储中全部的数据
    ls.clear();
    //七、清除本地存储中指定的数据
    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);