目录

实现本地化存储的三种方法

localStorage本地存储

localStorage.setItem

使用方式

代码

结果

localStorage.getItem

使用方式

代码举例

结果展示

localStorage.removeItem

使用方式

代码举例

结果展示

localStorage.clear

使用方式

代码举例

结果展示

sessionStorage会话存储

代码

代码

结果

cookie的主要作用

区别

练习代码

实现本地化存储的三种方法

localStorage

sessionStorage

cookie

localStorage本地存储

localStorage方法存储的数据没有时间限制，除非你把他删掉要不然一直存在。

localStorage有setItem、getItem、removeItem和clear方法

localStorage.setItem

使用方式

localStorage.setItem(key,value);

代码

//setItem
localStorage.setItem('姓名','二琳');
localStorage.setItem('性别','女');
localStorage.setItem('学号','20191527');

结果

localStorage.getItem

使用方式

localStorage.getItem(key);

代码举例

//getItem
localStorage.getItem('姓名');
localStorage.getItem('性别');
localStorage.getItem('学号');

结果展示

localStorage.removeItem

使用方式

localStorage.removeItem(key);

代码举例

//removeItem
localStorage.removeItem('性别');

结果展示

localStorage.clear

使用方式

localStorage.clear();

代码举例

//clear
localStorage.clear();

结果展示

sessionStorage会话存储

sessionStorage使用方法和localStorage方法一样，都有getItem、setItem、removeItem和clear方法。

代码

//sessionStorage
//setItem key&value
sessionStorage.setItem('早饭','包子');
sessionStorage.setItem('价格',5);
sessionStorage.setItem('数量',2);
//getItem
sessionStorage.getItem('早饭');
sessionStorage.getItem('价格');
sessionStorage.getItem('数量');
//removeItem
sessionStorage.removeItem('数量');
//clear
sessionStorage.clear();

cookie没有以上方法，需要我们自己封装getCookie和setCookie，一点都不方便(he tui)

代码

setCookie getCookie delCookie

//cookie
        //setCookie
        var setCookie = function (key, value, day) {
            var str = key + "=" + value;//拼接字符串 键名对于键值
            if (day) {//判断是否设置cookie时间限制
                var now = new Date();//获取当前天
                now.setDate(now.getDate() + day);//加上传入的day，设置失效天数；
                str += "; expires=" + now;//拼接字符串设置失效时间
            }
            document.cookie = str;//如果没有设置时间，直接插入cookie中
        }
        setCookie('cookie1', 255, 0);
        //getCookie
        var getCookie = function (key) {
            var arr = document.cookie.split('; ');//正常控制台输出的cookie是个字符串，我们需要将其变成数组
            for (var i = 0; i < arr.length; i++) {
                var keys = arr[i].split('=');//将数组中的值  键名，键值分开插入新的数组
                if (keys[0] == key) {//判断键名是否与我请求的cookie值相同
                    return keys[1];//相同返回键名对应的键值
                }

            }
        }
        console.log(getCookie('cookie1'));
        //delCookie
        var delCookie = function (key) {
            setCookie(key, '', -1);//将value设置为null,事件就过期了
        }
        delCookie('cookie1');

结果

写完了记得要open with live Server

cookie的主要作用

Cookie主要用在以下三个方面:

  • 会话状态管理（如用户登录状态、购物车、游戏分数和其它需要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为）

区别

本地化存储方法的对比
localStorage sessionStorage cookie
变量生命周期 永久存储 浏览器窗口关闭后数据失效 有生命周期，可以设置过期时间
存储大小 一般5MB 一般5MB 一般4KB
存储内容 存储用户浏览记录 存储用户浏览记录 存储用户登录信息
打开方式 本地打开 用liveserver打开
与服务端的通信 仅在客户端（浏览器）中保存、不参与和服务器的通信 参与服务端通信，cookie会携带在HTTP头中，如果使用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>Document</title>
</head>

<body>
    <script>
        //localStorage
        //setItem key&value
        localStorage.setItem('姓名', '二琳');
        localStorage.setItem('性别', '女');
        localStorage.setItem('学号', 20191527);
        //getItem
        localStorage.getItem('姓名');
        localStorage.getItem('性别');
        localStorage.getItem('学号');
        //removeItem
        localStorage.removeItem('性别');
        //clear
        localStorage.clear();

        //sessionStorage
        //setItem key&value
        sessionStorage.setItem('早饭', '包子');
        sessionStorage.setItem('价格', 5);
        sessionStorage.setItem('数量', 2);
        //getItem
        sessionStorage.getItem('早饭');
        sessionStorage.getItem('价格');
        sessionStorage.getItem('数量');
        //removeItem
        sessionStorage.removeItem('数量');
        //clear
        sessionStorage.clear();

        //cookie
        //setCookie
        var setCookie = function (key, value, day) {
            var str = key + "=" + value;//拼接字符串 键名对于键值
            if (day) {//判断是否设置cookie时间限制
                var now = new Date();//获取当前天
                now.setDate(now.getDate() + day);//加上传入的day，设置失效天数；
                str += "; expires=" + now;//拼接字符串设置失效时间
            }
            document.cookie = str;//如果没有设置时间，直接插入cookie中
        }
        setCookie('cookie1', 255, 0);
        //getCookie
        var getCookie = function (key) {
            var arr = document.cookie.split('; ');//正常控制台输出的cookie是个字符串，我们需要将其变成数组
            for (var i = 0; i < arr.length; i++) {
                var keys = arr[i].split('=');//将数组中的值  键名，键值分开插入新的数组
                if (keys[0] == key) {//判断键名是否与我请求的cookie值相同
                    return keys[1];//相同返回键名对应的键值
                }

            }
        }
        console.log(getCookie('cookie1'));
        //delCookie
        var delCookie = function (key) {
            setCookie(key, '', -1);//将value设置为null,事件就过期了
        }
        delCookie('cookie1');
    </script>
</body>

</html>

大家加油，祝大家早日拿到大厂offer！

# 前端 # 缓存 # javascript
Logo
OpenTiny社区

OpenTiny 是企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大自主核心技术为基础，加速企业应用的智能化改造。我们会在社区定期为大家分享一些前后端的技术文章。

更多推荐

cover

如何使用 TinyEditor 快速部署一个协同编辑器

avatar OpenTiny社区
cover

OpenTiny HUICharts——RankProcessChart 排名进度图上手指南

avatar OpenTiny社区
cover

基于Java的大学生就业管理系统的设计与实现(文档+源码)_kaic

avatar OpenTiny社区