H5的本地存储（localStorage）和会话（sessionStorage）还有cookie的使用与注意事项

m0_62541343

已于 2022-11-29 10:56:24 修改

阅读量563

点赞数

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

于 2022-11-24 16:47:13 首次发布

本文链接：https://blog.csdn.net/m0_62541343/article/details/128021469

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本地存储使用的时候注意：

js代码如下:

cookie使用的时候注意：

open in browser与open with live server的区别：

最后是总代码如下：

本地存储使用的时候注意：

js代码如下:

        // 本地存储的使用
        localStorage.setItem('age','18');
            localStorage.setItem('name','suntex');
            var name = document.getElementById('name');
            //清楚全部本地存储
            //localStorage.clear();
            // 清除key为name的本地存储
            //localStorage.removeItem('name');
            name.value = localStorage.getItem('name');

因为用var定义input标签的DOM为name.导致了无法讲本地存储的key值为name和value值为suntex放入input标签内。。结果如下

但是用let或者const定义name就可以

        // 本地存储的使用
        localStorage.setItem('age','18');
            localStorage.setItem('name','suntex');
            const name = document.getElementById('name');
            //清楚全部本地存储
            //localStorage.clear();
            // 清除key为name的本地存储
            //localStorage.removeItem('name');
            name.value = localStorage.getItem('name');

结果如下：

cookie使用的时候注意：

通过这种方式打开，不然的话浏览器F12之后cookie是没有东西的.

即网页必须通过url和端口方式打开才会有cookie。

open in browser与open with live server的区别：

open in browser：url显示的是电脑存储的默认路径，访问的是项目保存的电脑地址,会存在图片加载不出来问题。同时访问的页面是静态页面，也就是，在写代码的同时，在工作区保存了代码之后，还需要另外到浏览器页面进行刷新才能看到最新的效果，在开发时较麻烦。

open with live server：url是以127.0.0.1开头，即使用web服务器打开，可以解决掉前面图片不显示的问题。（5500是端口号）在这里访问的是动态直播页面，也就是在写代码时，只需要在工作区进行保存，浏览器端的页面就会同时进行更新显示效果

   //cookie的使用,特别注意的是cookie使用的时候必须
            document.cookie ="name = baobo";
            document.cookie = 'key = 123';
           
            //设置cookie的其时间戳
            var oDate = new Date();
            oDate.setDate(oDate.getDate()+3);
            console.log("name=my;expires="+oDate);
            document.cookie = "name=your; expires=" +oDate;
            console.log(document.cookie);

时间戳的效果如下：

最后是总代码如下：

<!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>HTML5数据存储</title>
</head>

<body>
    <input id="name" type="text" value="111"/>
    <input id="button" type="button" value="提交" onclick="load()"/>
    <script>
        // 本地存储的使用
        localStorage.setItem('age','18');
            localStorage.setItem('name','suntex');
            const name = document.getElementById('name');
            //清楚全部本地存储
            //localStorage.clear();
            // 清除key为name的本地存储
            //localStorage.removeItem('name');
            name.value = localStorage.getItem('name');
 


            //session的使用
            sessionStorage.setItem('sex',"男");
            //session是只在会话期间存在。而本地存储是即使会话关闭，只要你不去手动清除或者系统清除，他就不会清除。
            // 而session是浏览器关闭的时候，浏览器自己关闭的。或者是服务器关闭的。


            //cookie的使用,特别注意的是cookie使用的时候必须
            document.cookie ="name = baobo";
            document.cookie = 'key = 123';
           
            //设置cookie的其时间戳
            var oDate = new Date();
            oDate.setDate(oDate.getDate()+3);
            console.log("name=my;expires="+oDate);
            document.cookie = "name=your; expires=" +oDate;
            console.log(document.cookie);


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