html5 sessionStorage localStorage_sessionstorage.setitem('userid');-优快云博客

本文链接：https://blog.youkuaiyun.com/chadcao/article/details/52119121

本文通过两个示例对比讲解了sessionStorage与localStorage的区别：sessionStorage在关闭浏览器后数据丢失；而localStorage的数据则会一直保留直到手动清除。文章还介绍了如何使用JavaScript进行数据的设置、获取、删除及清空操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1) sessionStorage 关闭浏览器数据丢失

<!doctype html>
<html>
<head>
    <title>SessionStorage</title>
    <script type="text/javascript">
        function mySet() {
            sessionStorage.setItem('userid', '1');
        }
        function myGet() {
            var userid = sessionStorage.getItem('userid');
            alert(userid);
        }
    </script>
</head>
<body>
    <input type="button" value="set" onclick="mySet();" />
    <input type="button" value="get" onclick="myGet();" />
</body>
</html>

2) localStorage 关闭浏览器数据不丢失直至人工清除（清空浏览数据）

<!doctype html>
<html>
<head>
    <title>localStorage</title>
    <script type="text/javascript">
        function mySet() {//设置localStorage
            localStorage.setItem('userid', '1');
            localStorage.setItem('username', '张三');
        }
        function myGet() {//获取localStorage
            var userid = localStorage.getItem('userid');
            var username = localStorage.getItem('username');
            alert(userid);
            alert(username);
        }
        function myRemove() {//根据主键删除localStorage
            localStorage.removeItem('userid');
        }
        function myClear() {//清空localStorage
            localStorage.clear();
        }
    </script>
</head>
<body>
    <input type="button" value="set" onclick="mySet();" />
    <input type="button" value="get" onclick="myGet();" />
    <input type="button" value="remove" onclick="myRemove();" />
    <input type="button" value="clear" onclick="myClear();" />
</body>
</html>