Web前端-JavaScript--常见本地存储三种方式

最新推荐文章于 2024-01-30 09:46:08 发布

yanghainan0318

最新推荐文章于 2024-01-30 09:46:08 发布

阅读量1.6k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/yanghainan0318/article/details/106426447

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

前端的本地存储方式有多种多样:
最常用的有三种:
localStorage sessionStorage cookie IndexedDB(面试问)

localStorage使用:

localStorage.setItem("键","值"); 根据键存储值

localStorage.getItem("键"); 根据键取值

localStorage.removeItem("键"); 根据键删除值

localStorage.clear() 清除所有键值对数据

sessionStorage使用 sessionStorage跟上面的使用方法一毛一样

localStorage:
本地存储
特点: 永久存储只要用户不清除浏览器数据那么这个数据一直在

localStorage是本地永久存储在浏览器的其中一个本地文件夹中存储的本地数据

sessionStorage:
本地存储
特点: 时间是一次会话浏览器不关闭数据就再关闭浏览器时数据消失
除非把当前页的地址重新打开一个标签页这样数据也会丢失
通过跳转的方式数据就还在

sessionStorage是一次会话存储在本地文件没有是存储在浏览器的内存当中

储存数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>当前页面负责存储数据</h1>
<button>localStorage存储</button>
<button>sessionStorage存储</button>
<button>点击手动跳转新标签页</button>
<p>
    <a href="02.取出数据.html">跳转到取出数据</a>
    <a href="02.取出数据.html" target="_blank">跳转到取出数据(新标签页)</a>
</p>

<script src="../jquery-1.11.3.js"></script>
<script>


    $("button").eq(0).click(function () {
        localStorage.setItem("name","小强");
        localStorage.setItem("age",16);
        
    })

    $("button").eq(1).click(function () {
        sessionStorage.setItem("location","文化大厦");
        sessionStorage.setItem("length",186);

    })
    $("button").eq(2).click(function () {
        location.href="02.取出数据.html"

    })

</script>




</body>
</html>

取出数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>当前页面负责取出数据</h2>
<button>取出localStorage的数据</button>
<button>取出sessionStorage的数据</button>
<p>
    <a href="01.三种本地存储方式的存储.html">返回存储页面</a>

</p>

<script src="../jquery-1.11.3.js"></script>
<script>

    $("button").eq(0).click(function () {
        console.log(localStorage.getItem("name"));
        console.log(localStorage.getItem("age"));

    })

    $("button").eq(1).click(function () {
        console.log(sessionStorage.getItem("location"));
        console.log(sessionStorage.getItem("length"));

    })
</script>
</body>
</html>

cookie

cookie: 是一种缓存手段:
什么是缓存:
把已经请求到的数据存储一份为了方便下次快速访问

比如页面的图片文字视频好多音视频资源是浏览器自主完成的

缓存的目的是为了提高访问速度

在js中cookie的使用:
document.cookie

cookie的时长:
如果存储时
没有指明当前cookie的存储时长
则默认一次会话
只要浏览器不关闭 cookie一直在
就算是切换浏览器标签页数据也会在
session不一样 session切换标签页就数据丢失了
如果指明了 cookie的存储时长
那么只要超过这个时长 cookie自动失效

  $("button").eq(0).click(function () {
        console.log(document.cookie);
    })

存储cookie
document.cookie="键=值"
document.cookie="键=值"
document.cookie="键=值"

只能一次存储一个键值对

  $("button").eq(1).click(function () {
        document.cookie="name=小砌墙";
        document.cookie="age=16";
        document.cookie="location=文化大厦";
        document.cookie="length=198";
    })

储存帯时长的cookie

    $("button").eq(2).click(function () {
//        存储带时长的
        var date=new Date();
        var ms=date.getTime()+1000*30;
//        console.log(ms);
        var futureDate=new Date(ms);//未来时间的Date格式  需要调用toGMTString()方法转换成GMT格式


        document.cookie="name=小砌墙";
        document.cookie="location=文化大厦; expires="+futureDate.toGMTString();
    })

取出所有cookie:
document.cookie
取出的格式是: 键1=值1; 键2=值2; 键n=值n
类型是字符串我们要自己解析

修改:
document.cookie="已经存储过的键=新值";
键如果不存在则新增一份键值对
如果键已经存在则修改新值

删除cookie:
删除一个cookie需要用到生死簿(存活时间)

document.cookie="键=值; expires=一个GMT时间格式"
GMT时间格式:
Wed Dec 04 2019 10:56:40 GMT+0800 (中国标准时间)
1575428424957

再次针对已经存储过的键存储一次值无所谓
必须把到期时间变成过去时就可以删除了
无论这个cookie是否带时长只要修改成过去时就自动删除

document.cookie="要删除的键=随便; expires=一个过去时间的GMT格式"

cookie方法封装

var cookie={
    //根据毫秒值返回未来时间的GMT格式
    getGMTString:function (ms) {
        if(typeof ms !="number"){
            return;

        }
    //    获取当前时间的毫秒值
        var nowMS=new Date().getTime();
        var futureDate=new Date(nowMS+ms);
        //把GMT格式返回
        return futureDate.toGMTString();
        
    },


    // 1.增加cookie  传入json进行批量增加
    /*
        expiresMS表示本次存储的cookie时长的毫秒值
        expiresMS是可选的  如果不传则 不指明时长

     */
    addItem:function (json,expiresMS) {
                            //5000 毫秒值
        if(!json){
            return;
        }
        for(var k in json){
            if(expiresMS && typeof expiresMS=="number"){
                document.cookie=k+"="+json[k]+"; expires="+this.getGMTString(expiresMS)
                        // document.cookie="name=小砌墙; expires=GMT格式";
            }else{
                //没有传第二个参数  那就没有时长 那就直接存储cookie
                document.cookie=k+"="+json[k];
            }



        }
        
    },
    
//    删除指定cookie  (根据键删除指定cookie)
    removeItem:function (key) {
        var cookie=document.cookie;
        if(!cookie){
            //如果本地cookie为空 就啥也别玩了
            return;

        }
    //    如果不为空 那么就直接设置一个新cookie 但是 时长为过去时
        //只要时长是过去时 那么既不会新增 又可以把原来的同一个键的删除
        document.cookie=key+"=随便; expires="+this.getGMTString(-1000);

        
    },

//    修改cookie
    modifyItem:function (oldkey,newVal) {
        var cookie=document.cookie;
        if(!cookie){
            //如果本地cookie为空 就啥也别玩了
            return false;
        }
        if(this.getAllCookies()[oldkey]!=undefined){
        //    如果键存在 那么就修改
            document.cookie=oldkey+"="+newVal;

            return true;
        }else{
            // 如果键不存在
            return false;

        }




    },


//    获取所有cookie返回json 
    getAllCookies:function () {
        var cookie=document.cookie;
        if(!cookie){
            //如果本地cookie为空 就啥也别玩了
            return "";

        }
        var json={};
        var arr=cookie.split(";");
        // console.log(arr);
        for(var i=0;i<arr.length;i++){
            //这个arr里面包含 key和value  newArr[0]是键 newArr[1]是值
            var newArr=arr[i].trim().split("=");
            // console.log(newArr);
            //把键值对放入json里面
            json[newArr[0]]=newArr[1]
            
        }

        return json;


        
    },
    //根据键获取指定的值
    getItem:function (key) {
        var cookie=document.cookie;
        if(!cookie){
            //如果本地cookie为空 就啥也别玩了
            return "";

        }

        return this.getAllCookies()[key];



    },
//    清空所有cookie

    clear:function () {
        this.addItem(this.getAllCookies(),-1000);

    }

    
    
    
    

}//对象结尾
/*
*   cookie的封装:
*       1.增加cookie  传入json进行批量增加
*
*       2.删除cookie  传入指定键  删除cookie
*
*       3.修改cookie  键不存在 则不修改 键存在再修改
*
*       4.获取所有cookie 返回json
*
*       5.获取单个cookie  传入键 获取指定cookie的值
*
*       6.清空所有cookie
*
*
*
* */

yanghainan0318

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web前端-JavaScript--常见本地存储三种方式

前端的本地存储方式有多种多样: 最常用的有三种: localStorage sessionStorage cookie IndexedDB(面试问)localStorage使用: localStorage.setItem("键","值"); 根据键存储值 localStorage.getItem("键"); 根据键取值 ...
复制链接

扫一扫