js本地存储

本地储存

为什么需要本地存储呢：

数据存储在用户浏览器中，在控制台中Application模块中查看。

• 设置、读取方便、甚至页面刷新不丢失数据

• 容量较大，sessionStorage约5M、localStorage约20M

• 只能存储字符串，可以将对象JSON.stringify() 编码后存储 Application模块：

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

分别来说：

window.sessionStorage

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

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

以键值对的形式存储使用

window.localStorage

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

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

以键值对的形式存储使用

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

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

sessionStorage相关语法：

存储数据：

sessionStorage.setItem(key, value) 1 获取数据：

sessionStorage.getItem(key) 1 删除数据：

sessionStorage.removeItem(key) 1 清空数据：(所有都清除掉)

sessionStorage.clear() 1 localStorage相关语法：

存储数据：

localStorage.setItem(key, value) 1 获取数据：

localStorage.getItem(key) 1 删除数据：

localStorage.removeItem(key) 1 清空数据：(所有都清除掉)

localStorage.clear() 1 写一个小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();
    });