浏览器本地存储

最新推荐文章于 2025-10-09 15:15:52 发布

原创最新推荐文章于 2025-10-09 15:15:52 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了浏览器本地存储的原理，包括sessionStorage和localStorage的基本操作，如增删改查，并强调了它们的区别。通过实例展示了如何在HTML和JavaScript中使用这两个API进行数据持久化。

简介

本文主要介绍浏览器的本地存储
概念：

浏览器的本地存储是指浏览器端通过window.sessionStorage和window.localStorage属性来进行浏览器的本地存储的。
一般能存5M左右的数据。

说白了就是八个api 的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器本地存储</title>
</head>
<body>
    
    <script>

        //首先使用sessionStorage对象。
        //增，参数是key value
        window.sessionStorage.setItem("name","yehaocong");

        //获取
        var name = window.sessionStorage.getItem("name");
        console.log("name=",name);
    
        //改
        window.sessionStorage.setItem("name","liaoxiaoyan");

        //删除
        var name = window.sessionStorage.getItem("name");
        console.log("name=",name);

        window.sessionStorage.removeItem("name");

        var name = window.sessionStorage.getItem("name");
        console.log("name=",name);

        //清空
        window.sessionStorage.clear()

        

        //其次是localStorage，api是一模一样的
        //增，参数是key value
        window.localStorage.setItem("name","yehaocong");

        //获取
        var name = window.localStorage.getItem("name");
        console.log("name=",name);
    
        //改
        window.localStorage.setItem("name","liaoxiaoyan");

        //删除
        var name = window.localStorage.getItem("name");
        console.log("name=",name);

        window.localStorage.removeItem("name");

        var name = window.localStorage.getItem("name");
        console.log("name=",name);

        //清空
        window.localStorage.clear()

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