本地存储：sessionStorage与localStorage

最新推荐文章于 2022-12-26 11:15:51 发布

贾巨星

最新推荐文章于 2022-12-26 11:15:51 发布

阅读量374

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60806965/article/details/127591494

版权

1. sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除；

setItem(key,value) 设置数据

getItem(key) 获取数据

removeItem(key) 移除数据

clear() 清除所有值

<!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>
    <input type="text">
    <button class="storage">存储数据</button>
    <button class="get">获取数据</button>
    <button class="move">删除数据</button>
    <button class="clear">清除所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var storage = document.querySelector('.storage');
        //生命周期为关闭页面时   否则刷新页面也存在
        storage.addEventListener('click',function(){
            //存储数据
            var val = ipt.value;
            sessionStorage.setItem('uname',val);
            sessionStorage.setItem('pwd',val);

        })
        var get = document.querySelector('.get')
        get.addEventListener('click',function(){
            //获取数据
            console.log(sessionStorage.getItem('uname'));

        })
        var move = document.querySelector('.move');
        move.addEventListener('click',function(){
            //删除数据
            sessionStorage.removeItem('uname');

        })
        var clear = document.querySelector('.clear');
        clear.addEventListener('click',function(){
            //清除所有数据
            sessionStorage.clear();

        })
    </script>
</body>
</html>

2. localStorage

localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；
localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；
setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值

<!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>
    <style></style>
</head>
<body>
    <input type="text">
    <button class="storage">存储数据</button>
    <button class="get">获取数据</button>
    <button class="move">删除数据</button>
    <button class="clear">清除所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var storage = document.querySelector('.storage');
        //生命周期永久生效   除非手动删除  否则一直存在
        storage.addEventListener('click',function(){
            //存储数据
            var val = ipt.value;
            localStorage.setItem('uname',val);
            localStorage.setItem('pwd',val);

        })
        var get = document.querySelector('.get')
        get.addEventListener('click',function(){
            //获取数据
            console.log(localStorage.getItem('uname'));

        })
        var move = document.querySelector('.move');
        move.addEventListener('click',function(){
            //删除数据
            localStorage.removeItem('uname');

        })
        var clear = document.querySelector('.clear');
        clear.addEventListener('click',function(){
            //清除所有数据
            localStorage.clear();

        })
    </script>
</body>
</html>

不同点：

①传递方式不同

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

②数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。

④作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的。