牛客刷题——前端面试【一】

前端面试秘法

提高个人编程能力就是不停的敲代码

这里我推荐一款前端面试神器----->点击跳转

系列内容请关注：前端面试

二、cookie sessionStorage localStorage 共同点

三、cookie sessionStorage localStorage具体用法

一、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

相关阅读:
基于 BERT 实现的情感分析(文本分类)----概念与应用
算法第七天：leetcode之209.长度最小的子数组
for_each和transform算法（C++）
快速预览工具——Wlx2Explore入门
Python算法题2023 输出123456789到98765432中完全不包含2023的数有多少
linux常见命令(七)
6000多万铲屎官，捧得出一个国产主粮的春天吗？
Express框架
【C++详解】——内存管理
批处理小程序的制作

原文地址：https://blog.csdn.net/yzq0820/article/details/126328260