JS存储方式

最新推荐文章于 2024-04-29 20:55:31 发布

根本敲不完！

最新推荐文章于 2024-04-29 20:55:31 发布

阅读量638

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_62128198/article/details/127252617

版权

前端本地存储，即数据存储在浏览器中。

常用的方法有cookie、localStorage、sessionStorage

一、Cookie（常用于获取储存登录的用户信息）

1·使用场景也很实用：记住密码，方便下次自动登录账号密码。

2·记录用户的浏览器记录，然后进行商品的推荐（大数据）

特点：保存在浏览器端，容易被截获，不安全

大小：4KB 每次发送请求都会携带，导致占用带宽

<!-- 【cookie】
    
    一：使用场景：
     1：记住密码,下次自动登录。
     2：记录用户浏览数据,进行商品(广告)推荐。
     
    二：特点：
     1：cookie保存在浏览器端。
     2：单个cookie保存的数据不能超过4KB。
     3：cookie中的数据是以域名的形式进行区分的。
     4：cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。
     5：cookie中的数据会随着请求被自动发送到服务器端。
     
    三：
    由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的WebStorage存储机制。
    (localStorage和sessionStorage)
     
    ->

二、sessionStorage（会话存储）

如下列命令操作；


    // 添加数据
   window.sessionStorage.setItem("name","李四")
   window.sessionStorage.setItem("age",18)
    // 获取数据
    console.log(window.sessionStorage.getItem("name")) // 李四
    // 清除某个数据
    window.sessionStorage.removeItem("gender")
    // 清空所有数据
    window.sessionStorage.clear()

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除；
setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值

三、localStorage（永久存储）

 if(window.localStorage){
            alert('浏览器支持localStorage')
        }

        // 5.localStorage的写入
        if(!window.localStorage){
            alert('浏览器不支持localStorage')
        }else{
            var storage = window.localStorage;
            // 写入a字段
            storage['a'] = 1;
            // 写入b字段
            storage.b = 2;
            // 写入c字段
            storage.setItem('c',3)

            console.log(typeof storage['a']); //string
            console.log(typeof storage['b']); //string
            console.log(typeof storage['c']); //string
        }

只能储存字符串开发中经常将对象JSON.stringify()编码后储存

生命周期：永久，除非人为删除

大小：5M甚至更大

保存的位置：浏览器端存储，不同页面中也可以获取存储信息

存储方式：键值对