本地存储

一、localStorage

1. 介绍localStorage

localStorage 是 HTML5 的新方法，适用于大量数据存储需求，存储大小为5M。其生命周期是永久生效，除非被清理，否则一直存在。其数据可以多窗口共享。

// 储存数据
localStorage.setItem(key,value)
// 获取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//清空所有数据
localStorage.clear()

2. localStorage实例

了解了它的基本语法后，下面将举一个例子让大家更加深入的理解它的用法。

    <input type="text" name="" id="">
    <button class="get">获取数据</button>
    <button class="set">存储数据</button>
    <button class="remove">删除数据</button>

    <script>
	// 获取元素  
        const get = document.querySelector('.get')
        const set = document.querySelector('.set')
        const ipt = document.querySelector('input')
        const remove = document.querySelector(".remove")

        // 存储数据  点击set存input的value值
        set.addEventListener('click', function () {
            localStorage.setItem('uname', ipt.value)
        })
        // 获取数据
        get.addEventListener('click', function () {
            // 控制台打印为了可以看到获取数据事件
            console.log(localStorage.getItem('uname'))
        })
        // 删除数据
        remove.addEventListener('click', function () {
            localStorage.removeItem('uname')
        })
    </script>

实现效果如下：

3. localStorage特点

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

二、sessionStorage

1. 介绍sessionStorage

sessionStorage 是会话存储，和 localStorage 使用操作基本类似，唯一不同的是生命周期，sessionStorage 的生命周期是关闭当前标签页，即会话结束，其数据在同一个窗口共享。

// 储存数据
sessionStorage.setItem(key,value)
// 获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//清空所有数据
sessionStorage.clear()

2. sessionStorage 应用场景

敏感账号一次性登录。

三、存储复杂数据类型

1. 简介

本地只能存储字符串，无法存储复杂数据类型，所以需要先把复杂数据类型转换为JSON字符串，后再存储到本地。

2. 语法：JSON.stringify(复杂数据类型)

const obj = {
    userId: '01',
    uname: '张三',
    age: 18,
}
// 1. 存数据 需要先转换为JSON格式的字符串
const res = JSON.stringify(obj)
localStorage.setItem('message', res)

// 2. 取数据 把JSON字符串转换为对象
const res2 = localStorage.getItem('message')
console.log(res2)

存数据：

取数据：

3. 语法：JSON.parse(JSON字符串)

因为本地存储里面取出来的是字符串，不是对象，无法直接使用，所以把取出来的字符串转换为对象。

const res = JSON.parse(localStorage.getItem('message'))
console.log(res)

综上，JSON.stringify()是将对象转换为JSON格式的字符串，JSON.parse()是将JSON格式的字符串转为对象。