Vue学习（十四）本地存储webStorage

最新推荐文章于 2024-06-11 16:47:46 发布

飞不起来的小菜鸟

最新推荐文章于 2024-06-11 16:47:46 发布

阅读量287

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_29107721/article/details/125346980

版权

文章目录

webStorage
TodoList 本地存储案例
- App组件中方法修改

webStorage

存储内容大小一般在5MB左右（存储的key和value都是String的值）,浏览器把数据存在本地或者会话中

localStorage

本地存储（存储在本地硬盘上），关闭浏览器不会清除存储的数据

相关API

localStorage.setItem("key", "value")，设置一个本地存储。如果key已经存在，则更新其对应的值
localStorage.getItem("key")，读取key对应的值
localStorage.removeItem("key")，移除key对应的本地存储
localStorage.clear()，清空本地存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">保存数据</button>
    <button onclick="readData()">读取数据</button>
    <button onclick="deleteData()">删除数据</button>
    <button onclick="clearData()">清空数据