JS 本地储存 【详细】

本地储存

为什么需要本地存储呢：

1. 数据存储在用户浏览器中，在控制台中Application模块中查看。
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStorage约5M、localStorage约20M
4. 只能存储字符串，可以将对象JSON.stringify() 编码后存储

Application模块：

本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？

分别来说：

window.sessionStorage

1. 生命周期为关闭浏览器窗口

2. 在同一个窗口(页面)下数据可以共享

3. 以键值对的形式存储使用

window.localStorage

1. 声明周期永久生效，除非手动删除 否则关闭页面也会存在

2. 可以多窗口（页面）共享（同一浏览器可以共享）

3. 以键值对的形式存储使用

最大的区别：生命周期的不同，sessionStorage在浏览器存储数据的页面关闭以后存储的数据就消失了，但是localStorage即使浏览器存储数据的页面关闭了，数据也不会丢失，那怎么删除localStorage存储的数据呢？使用localStorage.removeItem(key)和localStorage.clear()语句来删除。

相同点：都是用来存储数据的并且代码语法结构相似。下面细说一下存储数据结构的代码：

sessionStorage相关语法：

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

localStorage相关语法：

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

写一个小demo：
写一个案例存储数据的案例：localStorage的语法是一样的所以在这里使用sessionStorage存储：
演示： 存储一个名字叫king的数据到本地，并且在控制台查询出来，最后删除

在这里点击存储数据，看Application中sessionStorage数据的变化：

点击获取数据：

点击删除数据或者删除所有数据：（因为只存储了一个数据，所以两个按钮的效果是一样的）

HTML部分：

	<input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="delete">删除数据</button>
    <button class="delete-all">删除所有数据</button>

JS部分：

		var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        // 点击存储数据按钮  给本地存储一条数据（通过键值对存储  ，键随意设置，值是文本框的值）
        set.addEventListener('click', function() {
            var content = ipt.value;
            sessionStorage.setItem('uname', content);
        });
        // 点击获取数据按钮  获取存储的数据（通过键来获取）
        var get = document.querySelector('.get');
        get.addEventListener('click', function() {
            console.log(sessionStorage.getItem('uname'));
        });
        // 点击删除数据按钮 删除指定键对应的值
        var del = document.querySelector('.delete');
        del.addEventListener('click', function() {
            sessionStorage.removeItem('uname');
        });
        // 点击删除所有数据，删除所有的键值对
        var del_all = document.querySelector('.delete-all');
        del_all.addEventListener('click', function() {
            sessionStorage.clear();
        });

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~