Vue CLI本地存储

最新推荐文章于 2024-07-11 11:14:36 发布

zwwkkkkk

最新推荐文章于 2024-07-11 11:14:36 发布

阅读量336

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zwdkkk/article/details/137436415

版权

webstroage 浏览器存储(js本地存储）

定义：用于将数据存储到浏览器中

浏览器打开存储的方式：打开浏览器—F12打开控制台—点击application（应用）—存储中有本地存储localStorage、会话存储sessionStroage、cookie（数据就是存储在这三个存储空间里）

WebStorage三大存储和区别

三大存储：localStorage、sessionStroage、cookie
区别：localStroage（本地存储）：用于长期保存网站的数据，保存的数据不会过期，除非手动删除，存储大小为5MB。
sessionStroage（会话存储）：用于临时数据，页面关闭时数据会被删除。
cookie：可设置过期时间，请求时呆在http请求头中

cookie localStorage 与 sessionStorage的优缺点

localStorage优点：可以大量保存浏览器中数据，不会随http请求一起发送。
缺点：不同窗口下数据；不能独立，相互干扰。例如：删除或添加一个数据，其它的窗口也会同步删除或者添加该数据不能被爬虫读取，在浏览器的隐私模式下不能读取，写入数据量大的话会卡（FF是将localstorage写入内存中的）。

sessionStroage优点：可以大量保存浏览器中数据。不同窗口下的sessionStorage，存储相互独立；互不干扰。

cookie优点：cookie限制大小， cookie会每次随http请求一起发送，浪费宽带。

操作数据存储相关的API（保存的数据都是以键值对的形式）

localStorage.setItem(key,value)保存（添加）数据
sessionStorage.setItem(key,value)保存（添加）数据

 localStorage.setItem("mag","hello");
sessionStorage.setItem("mag","hello");

localStorage.getItem(key键名)来读取数据的是字符串（字体是黑色的） string
sessionStorage.getItem(key键名)来读取数据的是字符串（字体是黑色的） string

 console.log(localStorage.getItem("mag"));
  console.log(sessionStorage.getItem("mag"));

localStorage.removeItem(“键名”) 选择删除一条数据括号中就选择这条数据的键名
sessionStorage.removeItem(“键名”) 选择删除一条数据括号中就选择这条数据的键名

 localStorage.removeItem("mag");
 sessionStorage.removeItem("mag");

localStorage.clear() 删除存储的所有数据
sessionStorage.clear() 删除存储的所有数据

localStorage.clear();
sessionStorage.clear();

注意：xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<h1>localStorage</h1>
<button onclick="saveDate()">点击保存数据</button>
<button onclick="readDate()">点击读取数据</button>
<button onclick="removeDate()">点击删除数据</button>
<button onclick="removeallDate()">点击清空数据</button>
<body>
    <script>
       // webStorage（浏览器本地存储：存储在浏览器中的数据）
        // 三大存储： // localStorage sessionStorage 存储大小5MB  cookie 存储大小 4kb
        // 区别
        // localStorage本地储存(用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除)  可以大量保存数据
        // sessionStorage会话储存(用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据) 可以大量保存数据
        // Cookie可设置过期时间，存储大小为4kb，请求时呆在http请求头中  限制大小
        let p= {name:"张三",age:18};
        // 打印输出的是[Object,object]
        // console.log(P.toString()); 字符串转为对象
        // 存储数据
        function saveDate(){
            // local.Storage.setItem(key 键名,value 键值)保存（添加）数据
            localStorage.setItem("mag","hello");
            localStorage.setItem("mag2","word");
            localStorage.setItem("person",JSON.stringify(p));

        }
        // 读取数据在控制台中
        function readDate(){
            // 通过控制台打印localStorage.getItem(key键名)来读取数据并显示的是字符串（字体是黑色的） string
            console.log(localStorage.getItem("mag"));
            // 检测当前的类型
            // console.log(typeof("mag"));
            console.log(localStorage.getItem("mag2"));  
            // 此时打印输入的不够规范
            // console.log(localStorage.getItem ("person"));
            // const 一个变量result =localStorage.getItem ("键名");
            // 如果当前读取的键名没有value打印的结果为null
            console.log(localStorage.getItem("mag1"));
        }
        function removeDate() {
            // localStorage.removeItem("键名") 选择删除一条数据括号中就选择这条数据的键名
            localStorage.removeItem("mag");
        }
        function removeallDate() {
            // localStorage.clear() 删除存储的所有数据
            localStorage.clear();
        }

    </script>
    
</body>
</html>

zwwkkkkk

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue CLI本地存储

定义：用于将数据存储到浏览器中浏览器打开存储的方式：打开浏览器—F12打开控制台—点击application（应用）—存储中有本地存储localStorage、会话存储sessionStroage、cookie（数据就是存储在这三个存储空间里）
复制链接

扫一扫