20-js本地存储
js本地存储
localStorage
localStorage是window下的对象，可以使用window.localStorage调用，也可以直接使用localStorage调用。
浏览器关闭，localStorage也不会消失
示例：
<body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">读取数据</button><button onclick="deleteData()">删除数据</button><button onclick="clearData()">清空数据</button><script>function saveData() {// 参数1：key，参数2：value// key、value都需要是字符串// localStorage.setItem('msg', 'hello')let person = {name: '张三', age:18}localStorage.setItem('person', JSON.stringify(person));}function readData() {let result = localStorage.getItem('person')console.log(JSON.parse(result))}function deleteData() {localStorage.removeItem('person');}function clearData() {localStorage.clear();}</script>
</body>
sessionStorage
用法和localStorage完全一样。
浏览器关闭后，sessionStorage会消失
<body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">读取数据</button><button onclick="deleteData()">删除数据</button><button onclick="clearData()">清空数据</button><script>function saveData() {// 参数1：key，参数2：value// key、value都需要是字符串// sessionStorage.setItem('msg', 'hello')let person = {name: '张三', age:18}sessionStorage.setItem('person', JSON.stringify(person));}function readData() {let result = sessionStorage.getItem('person')console.log(JSON.parse(result))}function deleteData() {sessionStorage.removeItem('person');}function clearData() {sessionStorage.clear();}</script>
</body>
总结
localStorage、sessionStorage统称为webStorage。
存储内容大小一般支持5MB左右（和浏览器有关）。
浏览器通过Window.sessionStorage、Window.localStorage属性实现本地存储机制。
相关API：
xxxStorage.setItem('key', 'value')：该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值xxxStorage.removeItem('key')：该方法接收一个键名作为参数，并把该键名从存储中删除xxxStorage.clear()：该方法会清空存储中的所有数据
sessionStorage存储的内容会随着浏览器窗口关闭而消失。
localStorage存储的内容，需要手动清除才会消失（调用相关API、手工清空浏览器的缓存）。
xxxStorage.getItem(xxx)如果键名对应的value获取不到，那么返回值是null。
JSON.parse(null)的结果也是null
使用本地存储来保存vue中的数据
示例：
<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyList from './components/MyList'export default {name: 'App',components: {MyHeader, MyFooter, MyList},data() {return {// todos初始化时，读取浏览器本地存储的todos，如果没有则设置为[]todos: JSON.parse(localStorage.getItem('todos')) || []}},watch: {// 使用监视器监视todos的改变，当todos改变时存入本地存储中，浏览器关闭也不会丢失todos: {handler(value) {localStorage.setItem('todos', JSON.stringify(value));},deep:true}}
}
</script>
先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！