15.Vue - webStorage浏览器本地存储

我爱布朗熊

已于 2023-12-13 23:39:42 修改

阅读量909

点赞数 1

分类专栏： Vue 文章标签：前端 javascript 开发语言

于 2022-09-11 17:43:33 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126807134

版权

Vue 专栏收录该内容

26 篇文章 9 订阅

订阅专栏

一、webStorage 浏览器本地存储

此技术不是Vue团队所打造的，在html文件中写也是没什么问题的

比如许多网页的搜索历史就存储在浏览器本地，并没有存储在数据库

而是存储在如下所示的地方，假如我们把这条数据删除之后，“搜索历史”也会被删除掉

存储数据的形式是key-value的形式

存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
浏览器端通过 Window.localStorage 和 Window.sessionStorage属性来实现本地存储机制
相关API
- ① xxxxxStorage.setItem('key', 'value');
  
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
- ② xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
- ③xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除
- ④ xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据

备注:

①SessionStorage存储的内容会随着浏览器窗口关闭而消失。

②LocalStorage存储的内容，需要手动清除才会消失。

③xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null

④JSON.parse(null)的结果依然是null

二、localStorage

最大特点：将浏览器关闭，这些数据也不会消失

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <title>localStorage</title>
</head>

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>



    <script type="text/javascript">
        let p = { name: '张三', age: 18 }

        function saveData() {
            // setItem键值对的方式，而且是字符串，
            window.localStorage.setItem('msg', 'hello!')

            // 对象千万别让他调用tostring，调完之后不认识了
            // window.localStorage.setItem('person',p)
            // 如果这么存储的话在浏览器中显示的是[object Object]，也就是对象调用tostring时才会出现这种情况

            // JSON.stringify 把一个对象变成字符串的模样，并且能体现出来里面的内容
            // 并且如果对象中属性的值是数字的话，仍然会保持数字的形式，不会变成字符串
            window.localStorage.setItem('person', JSON.stringify(p))
        }
        function readData() {
            console.log(localStorage.getItem('msg'))
            console.log(localStorage.getItem('person'))

            const result = localStorage.getItem('person')

            // JSON.parse将数据转化成js对象形式
            console.log(JSON.parse(result))
        }
        function deleteData() {
            localStorage.removeItem('msg')
        }

        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>


</html>

保存数据

读取数据

删除数据

清空数据

三、sessionStorage

最大特点：浏览器关闭后，数据就会消失

<!DOCTYPE html>
 
 <html>
    <head>
        <meta charset="UTF-8"/>
        <title>sessionStorage</title>
    </head>
 
    <body>
        <h2>sessionStorage</h2>
        <button onclick="saveData()">点我保存数据</button>
        <button onclick="readData()">点我读取数据</button>
        <button onclick="deleteData()">点我删除数据</button>
        <button onclick="deleteAllData()">点我清空数据</button>
 
 
 
        <script type="text/javascript">
            let p = {name:'张三',age:18}
 
            function saveData(){
                window.sessionStorage.setItem('msg','hello!')

                window.sessionStorage.setItem('person',JSON.stringify(p))
            }
            function readData(){
                console.log(sessionStorage.getItem('msg'))
                console.log(sessionStorage.getItem('person'))
 
                const result= sessionStorage.getItem('person')
 
                // JSON.parse将数据转化成js对象形式
                console.log(JSON.parse(result))
            }
            function deleteData(){
                sessionStorage.removeItem('msg')
            }
 
            function deleteAllData(){
                sessionStorage.clear()
            }
        </script>
    </body>
 
 </html>

四、ToDoList 本地存储

14.Vue - Todo_list案例 - 自我任务复选框

我们之前做的案例，在刷新之后就会恢复初始状态，我们现在想新加一个本地存储

那什么时候我们往浏览器中存储呢？

用户todos属性修改时向浏览器中进行存储

4.Vue-计算属性、监视属性、深度监视、计算属性与监视属性对比

我们要操作的数据

data() {
    return {
      // 避免空指针异常， todos可能是null，所以加了一个 “|| []”
      todos: JSON.parse(window.localStorage.getItem("todos")) || [],
      // todos: [
      //   { id: "0001", title: "抽烟", done: true },
      //   { id: "0002", title: "喝酒", done: false },
      //   { id: "0003", title: "开车", done: true },
      // ],
    };
  },

使用监视属性（并且是深度监视）监视todos

 watch: {
    // 使用监视属性监视todos,且一定要开启深度监视
    // todos(newValue){
    //   // 有对todos做出修改时，就会监视到
    //   window.localStorage.setItem('todos',JSON.stringify(newValue))
    // }
    todos: {
      deep: true,
      handler(newValue) {
        window.localStorage.setItem('todos',JSON.stringify(newValue))
      },
    },

我爱布朗熊

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
15.Vue - webStorage浏览器本地存储

1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)2.浏览器端通过 Window.sessionStorage和Window.localStorage属性来实现本地存储机制。该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。该方法接受一个键名作为参数，返回键名对应的值。该方法接受一个键名作为参数，并把该键名从存储中删除。该方法会清空存储中的所有数据。
复制链接

扫一扫