本地储存

为什么需要本地存储呢：

数据存储在用户浏览器中，在控制台中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)

获取数据：

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();});

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

JS 本地储存【详细】相关推荐

js监听地址栏变化_vue中本地储存也可以实时监听
网上看到的这个方法在项目里使用了贼爽啊,分享下顺便说一下 localStorage也实用比如在同一个页面里边不同位置两个变量的呈现都是使用的本地储存且一个变量修改,第二个变量也要实时变化 ...
js利用本地储存开获取商品足迹
js利用本地储存开获取商品足迹步骤 1.在点击li时,产生一条历史访问记录1.1获取所有的商品的li标签.1.2获取商品详情1.3 将这条记录放入到localStorage中, 数组[] 转json ...
react本地储存_如何使用React和本地存储构建freeCodeCamp的配方框
react本地储存 by Edward Njoroge 爱德华·尼约格(Edward Njoroge) 如何使用React和本地存储构建freeCodeCamp的配方框 (How to build f ...
【Web技术】1295- 总结一下前端本地储存方案
作者:星尘starx https://juejin.cn/post/6925311938419408904 引言 2022 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie ...
【Web技术】1101- 深入浅出前端本地储存
作者:星尘 https://www.yuque.com/starx/fe/oehz1m 引言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie Web Stora ...
react本地储存_如何在React项目中利用本地存储
react本地储存以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...
[Redux/Mobx] redux的数据存储和本地储存有什么区别？
[Redux/Mobx] redux的数据存储和本地储存有什么区别? Redux存储的数据本质上都是JS变量,都是在内存中的,页面刷新就会消失本质存储是像localStorage Cookie In ...
使用Vue 2.0+本地储存，留言板
留言板思路 // 把对象添加到数组的最前面 unshift // 数据与表单进行绑定 v-model <!DOCTYPE html> <html><head>&l ...
js本地存储设置有效时长
js本地缓存设置有效时间以下举例为小程序(浏览器.vue.uniapp等都适用) 如需在其他环境下使用,对代码稍加修改就好(储存的写法). 用户进入这个页面后第一次去获取数据,然后存下处理好的数据和 ...

JS 本地储存【详细】

本地储存

JS 本地储存【详细】相关推荐

最新文章

热门文章

JS 本地储存 【详细】

本地储存

JS 本地储存 【详细】相关推荐

最新文章

热门文章

JS 本地储存【详细】

JS 本地储存【详细】相关推荐