本地存储：通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
------------w3cshool

html提供了两个存储数据的对象方法

localStorage 永久存储
sessionStorage 会话级别的存储

能存储的东西：

数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

window.localStorage

该对象下共有四个api

api	说明
localStorage.setItem()	增加数据项
localStorage.getItem()	读取本地数据
localStorage.removeItem()	删除数据项
localStorage.clear()	移除所有数据
localStorage.length	属性，localStorage存储数据的长度（存了几条）
localStorage.key	同localStorage.getItem()

localStorage.setItem(key，value)，向本地存入数据
key: 必须是字符串的形式；value：可以是任意类型的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.localStorage.setItem("one", "第一条数据")
        window.localStorage.setItem("tow", 34343)
        window.localStorage.setItem("three", true)
        window.localStorage.setItem("four", {name: "张三"})
        window.localStorage.setItem(five, "key不为字符串时")
    </script>
</body>
</html>

那么怎么看我们存入的数据呢？
浏览器打开页面>开发者工具>application>Local Storage
就能看到我们存入的数据了

很明显，程序中最后一个当key不是一个字符串的时候，没有存进去

localStorage.getItem(key) 从本地读取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.localStorage.setItem("one", "第一条数据")
        window.localStorage.setItem("tow", 34343)
        window.localStorage.setItem("three", true)
        window.localStorage.setItem("four", {name: "张三"})
        // window.localStorage.setItem(five, "key不为字符串时")

        var a = window.localStorage.getItem("one")
        var b = window.localStorage.getItem("tow")
        var c = window.localStorage.getItem("three")
        var d = window.localStorage.getItem("four")

        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
    </script>
</body>
</html>

到控制台看打印出的结果

看到打印出的结果，有两点需要思索一下了
1.得到的数据是什么类型的？
打印一下类型就行了

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);

结果控制台打印的是清一色的“string”，因为localStorage只支持string类型的存储
2.存入的对象为什么是[object Object]？
明白了上面的操作就不难理解了。本地存储是将value的内容都先变成了string类型再存入本地的，那要如何存储对象，数组这些数据呢？
在数据存入之前，将对象转换成JSON字符串，使用JSON.stringify(obj)方法：

var obj = {
     name: "张三",
     age: 20
}
var objJSON = JSON.stringify(obj)
window.localStorage.setItem("userInfo", objJSON)

这时候再看，value就不再是[object Object]了

同样获取数据是还得把他转换回对象，毕竟操作一个json字符串没有必要，使用JSON.parse(data)方法进行转换

var data = window.localStorage.getItem("userInfo")
console.log(data);
var JSONObj = JSON.parse(data)
console.log(JSONObj);

数组也一个道理

localStorage.removeItem(key) 删除本地数据

 window.localStorage.removeItem("userInfo")

localStorage.clear() 清空本地数据
为了直观的观察，我们可以通过点击按钮的形式来看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">删除本地数据</button>
    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener('click', () => {
            window.localStorage.clear()
        })
        var obj = {
            name: "张三",
            age: 20
        }

        var objJSON = JSON.stringify(obj)

        window.localStorage.setItem("userInfo", objJSON)
        window.localStorage.setItem("a", "456")
    </script>
</body>

</html>

window.sessionStorage

用法几乎同 window.localStorage，区别就是sessionStorage 不是永久存储的，当浏览器关闭时，sessionStorage 存储的数据就会丢失

注意：

1.如果在取本地数据没获取到，但是后面的程序用到了这个数据，程序可能就会报错，所以需要做处理，比如获取一个数组，以防万一，在没有取到值的情况下赋给一个空数组

var myWantArr = JSON.parse(window.localStorage.getItem("data") ) || []

如果获取的数据是对象或者数组，尽量不要直接获取里面的成员，如

var firstData= JSON.parse(window.localStorage.getItem("data") )[0] || []

因为很有可能你是在后面的程序中直接操作这个变量，对于第一次打开你的网页的人，它的本地是没有数据的，这样可能直接导致程序报错，无法执行后面的程序
2.不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

HTML本地存储

html提供了两个存储数据的对象方法

能存储的东西：

window.localStorage

window.sessionStorage

注意：