JavaScript——localStorage和sessionStorage的使用方法

最新推荐文章于 2025-09-22 20:06:12 发布

原创最新推荐文章于 2025-09-22 20:06:12 发布 · 1.1w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #vue.js

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文探讨了localStorage和sessionStorage在网页开发中的作用，对比了它们的生命周期、数据类型限制及使用方法，包括存储字符串、对象转换和操作技巧。

首先localStorage和sessionStorage都是用来存储客户端临时信息的对象。说白了就是把用户输入的信息放在本地中，通常用于记住密码这一类需要实现存储数据的功能。通常我们自己写的网页每次刷新后数据就自动消失了，而这两个方法可以让其刷新完毕过后还保留其中用户输入的数据

这里就用到loaclStorage和sessionStorage方法

其两者的特点如下：

1、用来存储临时信息

2、只能存放字符串类型的对象

3、localStorage生命周期是永久

4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

5、不同的浏览器是不能共享localStorage或着sessionStorage中的信息

下面说一下localStorage（）方法：

看这个代码：

<!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>localStorage</title>
    <style>
        input{
            width: 150px;
            height: 30px;
            border: black 1px solid;
            outline: none;
            padding-left: 20px;
            box-sizing: border-box;
        }
        button{
            width: 150px;
            height: 30px;
            border: solid 1px #000;
            font-size: 14px;
            display: block;
            margin: 10px 0;

        }
    </style>
</head>
<body>
    <input type="text" name="" placeholder="请输入您的数据" id="">
    <hr>
    <button id="set">存储本地的数据</button>
    <button id="get">获取本地的数据</button>
    <button id="remove">删除本地的数据</button>
    <button id="delete">清空所有数据</button>
    <script>
        var btn_ipt = document.querySelector('input');
        var p = document.querySelector('p')
        var btn_set = document.getElementById('set');
        var btn_get = document.getElementById('get');
        var btn_remove = document.getElementById('remove');
        var btn_del = document.getElementById('delete');
        btn_set.onclick = function () { 
            var val = btn_ipt.value
            window.localStorage.setItem('username',val);
         }
         btn_get.onclick = function(){
            console.log(window.localStorage.getItem('username'))
         }
         btn_remove.onclick = function(){
             window.localStorage.removeItem('username');
         }
         btn_del.onclick = function(){
             window.localStorage.clear();
         }
    </script>
</body>
</html>

存储本地的数据 效果如下

如果刷新浏览器的话，这些数据也不会消失，会存储在本地

获取本地的数据 效果如下

删除本地的数据和清空所有数据 效果如下：

这里注意一下：localStorage数据是永久的，无论是关闭页面还是换个新的页面导入链接他的数据都还在，但是在浏览器不一样的情况下打开是没有数据的

360浏览器：

谷歌浏览器：

下面说一下

sessionStorage

它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空

看这个例子：

<!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>sessionStorage方法</title>
    <style>
        input {
            width: 140px;
            height: 26px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin: 0 0 30px 0;
            font-size: 14px;
        }

        button {
            width: 140px;
            height: 30px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            font-size: 14px;
            display: block;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <input type="text" name="" placeholder="请输入您的数据" id="">
    <hr>
    <button id="set">存储本地的数据</button>
    <button id="get">获取本地的数据</button>
    <button id="remove">删除本地的数据</button>
    <button id="delete">清空所有数据</button>

    <script>
        var btn_ipt = document.querySelector('input');
        var p = document.querySelector('p')
        var btn_set = document.getElementById('set');
        var btn_get = document.getElementById('get');
        var btn_remove = document.getElementById('remove');
        var btn_del = document.getElementById('delete');
        var obj = {
            'name': 'NanChen',
            'age': 86,
            'sex': '男'
        }

        btn_set.onclick = function () { 
            var val = btn_ipt.value
            window.sessionStorage.setItem('username',val);
         }
         btn_get.onclick = function(){
            console.log(window.sessionStorage.getItem('username'))
         }
         btn_remove.onclick = function(){
             window.sessionStorage.removeItem('username');
         }
         btn_del.onclick = function(){
             window.sessionStorage.clear();
         }

如果这里新建一个页面把链接导入是不会存储数据的，把页面关闭也不会存储之前的信息

如何用此方法来存储对象？

这是一个对象obj

var obj = {
            'name': 'NanChen',
            'age': 86,
            'sex': '男'
        }

如果直接存储的话会出现下面这个问题

window.sessionStorage.setItem('username',obj);

如果用上面那种方法存储对象不会得到信息，只会出现Object

解决办法：

var boj1 = JSON.stringify(obj)

// 转换为字符串

window.sessionStorage.setItem('username',obj1);

如何用此方法获取对象数据？

这样？

console.log(window.sessionStorage.getItem('username'))

这里也是不行的。那这边就要使用JSON.stringify()方法来获取

JSON.stringify() ：用于将 JavaScript 值转换为 JSON 字符串

正确获取对象数据的方法：

console.log(JSON.parse(window.sessionStorage.getItem('username')));

效果如下：

总结

一、window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

二、window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口同一浏览器可以共享