你可能需要好好认识一下这个LocalStorage（本地存储）

我们在了解LocalStorage之前，不妨先了解一下Web的存储机制：

Web Storage 最早是在Web超文本应用技术工作组（WHAT_WG）的Web应用1.0规范中描述的。这个规范最初的工作最终成为了HTML5 的一部分。Web Storage 的目的是为了克服有 cookie 带来的一些限制，Cookie存储的数据量非常小，而且当数据需要被严格控制在客户端上时，无须持续地将数据发送回服务器，所以可能会造成带宽的浪费。

Web Storage 提供了两个存储对象：localStorage 和 sessionStorage。

• sessionStorage 对象存储特定于某个会话的数据，也就是该数据只会保持到浏览器关闭，会话结束后会自动失效。存储在 sessionStorage 中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox和WebKit都支持，IE不支持）。
• localStorage 对象可以永久存储，而且同源下数据多窗口也能共享。But！localStorage也是有限制的，大多数桌面浏览器都会设置每个来源5MB的限制（Chrome和Safar对每个来源的限制是2.5MB）。虽然对每个来源的大小进行限制，但是要知道，Cookie只有4K 的大小，所以这些限制是不足以成为大家使用 localStorage 的障碍的。

好了！关于Web的存储机制就先介绍到这里，如果大家对这方面感兴趣，可以评论区留言，我会另开一个专题进行讲解Web的存储机制。

一、什么是 localStorage ：

上面的内容大家也都看到了，应该对 localStorage 也已经有了一个初步的印象了。什么？？在总结一遍？？那么接着往下看吧。

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它通常只能存储String类型的数据，所以最好在每次存储时把数据转换成JSON格式，取出的时候再转换回来。

二、localStorage 的使用：

在使用之前需要注意两点：

首先在 setItem 存储数据时，可能会达到大小限制，或者是JSON.parse 解析的字符串不符合json规则也很有可能报错，所以在使用的时候最好加上错误捕获：

// try catch 结构：
    try{
        // 我们把有可能报错的内容放入try之中执行;
        // 报错了不会影响代码的继续执行;
        // 会把错误信息放到 catch 里面的参数 e 之中;可以通过 e 进行错误排查;

    }catch( e ){

    }

另外在存储容量快满时，会造成getItem性能的急剧下降。

现在正式介绍一下 localStorage 的使用方法：

• localStorage.setItem("key","value")：存储名字为key的一个值value，如果key存在，就更新value；

//存储数据 : 
    // 使用方法存储数据
    localStorage.setItem("test" , "hello world1"); // 设置test为 hello world1
    localStorage.setItem("test" , "hello world2"); // 覆盖之前的值，现在test为 hello world1
    // 使用属性存储数据
    localStorage.test3 = "hello word3";

• localStorage.getItem("key")：获取名称为key的值，如果key不存在则返回null

// 获取数据 
    // 使用方法读取数据
    var res = localStorage.getItem("test");
    console.log(res);
    // 使用属性读取数据
    var test3 = localStorage.test3;

• localStorage.removeItem("key")：删除名称为“key”的信息，这个key所对应的value也会全部被删除

// 删除数据;
    localStorage.removeItem("test");

• localStorage.clear()：清空localStorage中所有信息

// 清空数据;
　　localStorage.clear();

key()：向其中输入索引即可获取对应的键值

 var storage=window.localStorage;
    storage.setItem("test1" , "hello world1");
    storage.setItem("test2" , "hello world2");
    // 遍历数据，取出每一条数据的key值
    for(var i=0;i<storage.length;i++){
        var key=storage.key(i);
        console.log(key);
    }

三、与 JSON 的配合使用：

对于前端来说存储复杂数据最方便的结构是什么呢？ 当然是 数组 + 对象

那么，我们考虑是否可以将对象、数组内容放入到 localstorage 之中进行存储呢 ?

我们要知道： localstorage：只允许存储字符串；

JSON 是字符串结构；标准的json对象{"name" : "jack"}

JSON.stringify(); 将json格式的数据（JavaScript 对象）转换成JSON格式的字符串

    var  data = {name:"jack"};
    data = JSON.stringify(data);
    localStorage.setItem("data1",data);

JSON.parse(); 将JSON格式的字符串转换成JSON对象进行处理

    var str = localStorage.getItem("data1");
    var obj = JSON.parse(str);
    console.log(obj);

四、localStorage 的优缺点：

· localStorage 的优势：

1. localStorage 拓展了 cookie 存储空间只有的 4K 限制
2. localStorage 会将请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个也是有局限性的

· localStorage 的局限：

1. 浏览器的存储空间大小不统一，并且在IE8以上的IE版本才支持 localStorage 这个属性
2. 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换
3. localStorage 在浏览器的隐私模式下面是不可读取的
4. localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5. localStorage 不能被爬虫抓取到

· localStorage 浏览器兼容情况：

你可能需要好好认识一下这个LocalStorage（本地存储）

原文：https://www.cnblogs.com/XH-jing/p/12546008.html