牛客刷题——前端面试【一】谈一谈cookie sessionStorage localStorage

简介: 学习cookie sessionStorage localStorage。

目录


一、cookie sessionStorage localStorage 区别


二、cookie sessionStorage localStorage 共同点


三、cookie sessionStorage localStorage具体用法


四、 localStorage   JS原生实现


五、sessionStorage JS原生实现


一、cookie sessionStorage localStorage 区别


cookie是由服务器端写入的,而SessionStorage、 LocalStorage都是由前端写入的,cookie的生命周期是由服务器端在写入的时候就设置好的,LocalStorage是写入就一直存在,除非手动清除,SessionStorage是页面关闭的时候就会自动清除。


二、cookie sessionStorage localStorage 共同点


都是存储在浏览器本地的


三、cookie sessionStorage localStorage具体用法


Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则,SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据,但是SessionStorage、 LocalStorage不会 加分回答 由于它们的以上区别,所以它们的应用场景也不同,Cookie一般用于存储登录验证信息SessionID或者token,LocalStorage常用于存储不易变动的数据,减轻服务器的压力,SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条的功能。


四、 localStorage   JS原生实现


我们先给button一个监听事件,让我们有存入的动作


这里是想在提交后也能在页面上显示,所有定义了一个li来吧input的value值赋值到ul里面


这里使用了insertBefore在添加时,会在最上方


这里arr是自己定义的数组


存储和获取都是通过函数封装


savaData(arr)就是将input的值存储到了浏览器


window.localStorage.setItem('input', JSON.stringify(title)) 保存的代码title是形参,input自己取得


获取let data = window.localStorage.getItem('input') 上面取的input


这里有个if判断是判断这里data是否有内容,有就return JSON.parse(data) 没有就return[]主要是得到所有内容的数组


代码段也有注释解释

<style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入内容"><button>提交</button>
    <hr>
    <ul></ul>
    <script>
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            let arr = getData()  //调用内容,是为了获得已经存入的内容,不然会出现内容覆盖
            let li = document.createElement('li')
            li.innerHTML = input.value; //表单值给到li
            ul.insertBefore(li, ul.children[0]);//在把值给到ul添加值会在第一个
            arr.push(input.value)
            saveData(arr)
            input.value = '' //为好看,输入过后表单的内容自动清空
        })
        function saveData(title) {
            window.localStorage.setItem('input', JSON.stringify(title))
        }
        function getData(get) {
            let data = window.localStorage.getItem('input')
            console.log(data);//打印所取到的值,但是第一次为空,因为浏览器里面没有值
            if (data != null) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
    </body>


五、sessionStorage JS原生实现


基本操作如上,主要部分替换如下代码段

window.sessionStorage.setItem('input', JSON.stringify(title))
let data = window.sessionStorage.getItem('input')
    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入内容"><button>提交</button>
    <hr>
    <ul></ul>
    <script>
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            let arr = getData()
            let li = document.createElement('li')
            li.innerHTML = input.value;
            ul.insertBefore(li, ul.children[0]);
            arr.push(input.value)
            saveData(arr)
            input.value = ''
        })
        function saveData(title) {
            window.sessionStorage.setItem('input', JSON.stringify(title))
        }
        function getData(get) {
            let data = window.sessionStorage.getItem('input')
            console.log(data);
            if (data != null) {
                return JSON.parse(data)
            } else {
                return []
            }
        }
    </script>
</body>


结束语:

让我们一起进步,拿到自己想要的offer


目录
打赏
0
0
0
0
15
分享
相关文章
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
182 0
解决浏览器存储问题,不得不了解的cookie、localStorage和sessionStorage
该文章详细对比了浏览器存储机制中的cookie、localStorage和sessionStorage的不同之处,以及各自的适用场景。
【刷题】 leetcode 面试题 01.06 字符串压缩
来看效果: 非常好!!!过啦!!!
79 5
【刷题】 leetcode 面试题 01.06 字符串压缩
|
9月前
|
【刷题】 leetcode 面试题 08.05.递归乘法
递归算法是一种在计算机科学和数学中广泛应用的解决问题的方法,其基本思想是利用问题的自我相似性,即将一个大问题分解为一个或多个相同或相似的小问题来解决。递归算法的核心在于函数(或过程)能够直接或间接地调用自身来求解问题的不同部分,直到达到基本情况(也称为基础案例或终止条件),这时可以直接得出答案而不必再进行递归调用。
98 4
【刷题】 leetcode 面试题 08.05.递归乘法
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
194 0
对于session、cookie、 localStorage和SessionStorage的理解
对于session、cookie、 localStorage和SessionStorage的理解
78 0
刷题两个月,从入门到字节跳动offer丨GitHub标星16k+,美团Java面试题
刷题两个月,从入门到字节跳动offer丨GitHub标星16k+,美团Java面试题
前端Cookie的使用
前端Cookie的使用
58 1

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    73
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    132
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    4
  • 4
    docker安装nginx,前端项目运行
    29
  • 5
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
    20
  • 6
    详解智能编码在前端研发的创新应用
    32
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
    6
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    11
  • 10
    巧用通义灵码,提升前端研发效率
    70