提前声明

本地存储这个不是vue团队打造的，原本JS里面就有这个功能，所以本文章的代码我们不用非要写在vue里面再通过脚手架翻译，直接写在.html文件里就好了

引入

建立两个文件localStorage.html和sessionStorage.html

打开浏览器，进入唯品会官网，可以看到我们的搜索历史是空的

搜索牛仔裤

然后关掉再重新进入官网，可以发现我们的搜索历史多了个牛仔裤

因为这个“牛仔裤”被本地存储起来了

然后我们可以在本地存储中也就是在“牛仔裤”后面加上一个“包包”

然后点一下网页，再打开搜索历史，就可以看到除“牛仔裤”，还多了“包包”

唯品会可以存放那我们也可以存放

对localStorage里面数据的增删改查

在localStorage增加数据

先写一个添加按钮

在网页上我们可以看到本地存储是空的

window上有一个localStorage属性，可以用setItem在本地存储里添加数据

点击按钮

就可以看到本地存储多了一个数据

如果你输入的不是字符串类型的，它也会自动帮你转化成字符串类型

由数字类型变为字符串类型

但是如果添加一个这样的对象，

它就会变成这样

而且我们可以看到这个对象转化成字符串就是这样的

就是说我们这样保存数据是不行的，我们可以用JSON.stringfy()来让对象变成字符串，并且体现里面的内容

读取localStorage数据

创建按钮

使用getItem来读取localStorage里的数据

但是msg3获取的数据不是我们想要的

我们需要通过JSON.parse()解析一下

那么得到的就是我们想要的对象

删除localStorage数据

创建删除按钮，通过removeItem()来删除localStorage里的数据

点击删除按钮，成功删除msg2数据

清空localStorage的数据

创建按钮，通过clear()来清空localStorage里的所有数据

点击清空按钮，成功清除localStorage里的所有数据

注意

如果你读取msg4

输出的是null

把之前的msg3改成msg4

得到的也是null

还有如果浏览器关闭，再打开网页之前的数据依旧还在

对sessionStorage里面数据的增删改查

sessionStorage也有setItem等等这些，和localStorage一样，所以我们把localStorage.html里的代码复制，在sessionStorage.html粘贴，并将粘贴在sessionStorage.html代码中的localStorage全部换成sessionStorage

然后打开网页，这次我们不再关注本地存储里的数据了，我们这次关注的是会话存储里的东西

脚手架、插件（浏览器插件）（编辑器插件，例如：Open with Live Server）都可以往里面放东西

把之前那些msg4给改回原来正常的，然后打开网页，我们可以发现增删改查

对于存储里数据的更改删除

对于本地存储和会话存储里的数据，除了我们上面的这些操作可以改变数据，我们清除浏览器的缓存也可以清除数据

SessionStorage存储的内容会随着浏览器窗口关闭而消失。

关掉网站后，再打开数据就没了

LocalStorage存储的内容，需要手动清除才会消失。

关掉网站，再打开数据依旧在

手动清除后

再打开网站也没有数据

总结

本小结的主要代码如下：

localStorage.html


<!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>localStorage</title>
</head>

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

    <script>
        let p = { "name": "张三", "age": 18 }
        // console.log(p.toString())
        function saveData() {
            localStorage.setItem('msg', '鞋子！！！')
            localStorage.setItem('msg2', 666)
            localStorage.setItem('msg3', JSON.stringify(p))
        }

        function readData() {
            console.log(localStorage.getItem('msg'))
            console.log(localStorage.getItem('msg2'))

            const result = localStorage.getItem('msg3')
            console.log(JSON.parse(result))

            // console.log(localStorage.getItem('msg4'))
        }

        function deleteData() {
            localStorage.removeItem('msg2')

        }

        function deleteAllData() {
            localStorage.clear()

        }
    </script>

</body>

</html>

sessionStorage.html


<!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>sessionStorage</title>
</head>

<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

    <script>
        let p = { "name": "张三", "age": 18 }
        // console.log(p.toString())
        function saveData() {
            sessionStorage.setItem('msg', '鞋子！！！')
            sessionStorage.setItem('msg2', 666)
            sessionStorage.setItem('msg3', JSON.stringify(p))
        }

        function readData() {
            console.log(sessionStorage.getItem('msg'))
            console.log(sessionStorage.getItem('msg2'))

            const result = sessionStorage.getItem('msg3')
            console.log(JSON.parse(result))

            // console.log(sessionStorage.getItem('msg4'))
        }

        function deleteData() {
            sessionStorage.removeItem('msg2')

        }

        function deleteAllData() {
            sessionStorage.clear()

        }
    </script>

</body>

</html>

浏览器本地存储