localstorage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浏览器本地存储</title>
</head>
<body>
<div id="root"><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button>
</div>
<script type="text/javascript">let person = {name:"张三",age:"18"}function saveData() {localStorage.setItem("msg","hello")localStorage.setItem("msg2",666)localStorage.setItem("msg3",JSON.stringify(person))}function readData(){console.log(localStorage.getItem("msg"))console.log(localStorage.getItem("msg2"))const result = localStorage.getItem("msg3")console.log(result)console.log(JSON.parse(result))}function deleteData(){localStorage.removeItem("msg")}function deleteAllData(){localStorage.clear()}
</script>
</body>
</html>

SessionStorage

和 LocalStorage 用法相同，把上边代码中的 localStorage改为sessionStorage

总结

LocalStorage 和 SessionStorage 统称为 WebStorage
1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
⒉浏览器端通过 Window.sessionStorage 和Window.localStorage属性来实现本地存储机制
3.相关API：
1.xxxxxStorage.setItem( " key' , "value");
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
2.xxxxxStorage.getItem( "person");
该方法接受一个键名作为参数，返回健名对应的值
3.xxxxxStorage.removeItem( "key");
该方法接受一个键名作为参数，并把该键名从存储中删除
4.xxxxxStorage.clear()
该方法会清空存储中的所有数据
4.备注：
1.SessionStorage 存储的内容会随着浏览器窗口关闭而消失
2.LocalStorage 存储的内容，需要手动清除才会消失（调用api 或清空缓存）
3. xxxxStorage.getItem(xxx)，如果 xxx 对应的 value 获取不到，那么 getltem 的返回值是null
4.JSON.parse(null) 的结果依然是 null

TodoList 改为本地存储

我们之前写的 TodoList 案例数据是写死的，每次刷新都恢复到写死的数据，我们现在把它改为本地存储。修改 App.vue，把 todos 改为深度监视，每当 todos 发生变化就使用本地存储存储数据。同时初始化的时候，todos 赋值是从本地存储读取的

......
<script>
......
export default {......data() {return {//读取本地存储todos: JSON.parse(localStorage.getItem("todos")) || []}},methods: {......},watch:{//深度监视todos:{deep:true,handler(value){localStorage.setItem("todos",JSON.stringify(value))}}}
}
</script>
......

运行程序，输入数据，刷新浏览器，数据不会消失

Vue 浏览器本地存储相关推荐

Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
IndexedDB浏览器本地存储、缓存、数据库、介绍
目录 1.前言 2.IndexedDB简介 3.IndexedDB使用场景 4.IndexedDB特点 4.1.非关系型数据库 NoSql 4.2.持久化存储 4.3.异步操作 4.4.支持事务 4. ...
Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录浏览器本地存储浏览器本地存储浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
快来看啊 --- --- --- ＞＞＞＞浏览器本地存储 ~~~
1. 浏览器本地存储方式及使用场景 (1)Cookie Cookie是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了. ...
【前端浏览器】浏览器缓存（http缓存）浏览器本地存储（总结）
浏览器缓存 && 浏览器本地存储(总结) 文章目录浏览器缓存 && 浏览器本地存储(总结) 写在前面一.浏览器缓存(http缓存) 相关术语 1. 对浏览器的缓存机 ...
浏览器本地存储的使用
浏览器的本地存储,我们的数据如果想每次打开浏览器都可以访问到的话,我们就必须使用本地存储这个功能 localStorage 对象,便可以帮我们实现这个功能 localStorage.setItem(& ...
js之浏览器本地存储webstorage
...........仅对以前所学做复习记录使用......... webstorage分为两个存储:localStorage和sessionStorage. 存储大小根据浏览器的不同,容量也不同,一 ...
全网最全的浏览器本地存储，赶紧收藏
想要了解更多前端知识,就来智一面吧点击进入本地存储主要有以下几种,localStorage,sessionStorage和cookie,WebSql和IndexDB主要用在前端有大容量存储需求的页 ...

Vue 浏览器本地存储

文章目录

localstorage

SessionStorage

总结

TodoList 改为本地存储

Vue 浏览器本地存储相关推荐

最新文章

热门文章