Loading...
墨滴

MYSUN

2021/10/19  阅读:34  主题:橙心

前端存储之sessionStorage和localStorage

前端存储之sessionStorage和localStorage

1.sessionStorage

概念: sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

简单来说,就是用户访问成功之后,在浏览器窗上储存的一个数据,然后当回话结束,窗口被关闭之后,数据也随之销毁,可见sessionStorage只适合存储即用即销毁的临时数据。

特别注意一点:存储在sessionStorage或localStorage中的数据特定于页面的协议,http与https会存储不一样的sessionStorage,且返回的是一个storage对象。

sessionStorage的简单使用

api使用方法

//存储
sessionStorage.setItem('key''value');

//获取
sessionStorage.getItem('key');

//删除指定数据
sessionStorage.removeItem('key');

//删除所有保存的数据
sessionStorage.clear();

object使用方法

//存储
var stroage = window.sessionStorage
stroage['name'] = "张三"

//获取
console.log(sessionStorage.name);

//删除指定数据
delete sessionStorage.name
//或者
delete sessionStorage['name']

//删除所有保存的数据
for(var key in sessionStorage){
 delete sessionStorage[key];
}
console.log(sessionStorage);

实例

<input type="text" id="getInput">
var getInputId = document.getElementById("getInput")

//判断是否存在sessionStorage
if(sessionStorage.getItem('inputVal')){
    getInputId.value = sessionStorage.getItem('inputVal')
}

getInputId.addEventListener('change',function(){
    if(getInput.value){
        //添加sessionStorage
        sessionStorage.setItem('inputVal',getInput.value)
    }
})

以上实例展示了sessionStroage的存储过程,以及获取方式,在关闭窗口之后,sessionStroge也被清楚,但是只刷新当前页面的话,数据依旧存在,由此可见sessionStroage的特性

2.localStroge

概念:了解sessionStroage之后,localStroage就正好解决了数据不能长久存储的问题,而且除非主动删除,否则数据会一直存在

需要注意:localStroage不能存储过多数据,否则会占据大量资源,致使页面卡顿,其次localStorage存储的数据不能被爬虫抓取到,不利于seo,localStorage只支持string类型的存储。

localStroage的放回依然是一个stroage对象

localStroge的简单使用

localStroge的使用与sessionStroage相同,因此只举例api写法

//存储
localStroge.setItem('key''value');

//获取
localStroge.getItem('key');

//删除指定数据
localStroge.removeItem('key');

//删除所有保存的数据
localStroge.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>
        .history_content{
            width300px;
            overflow: hidden;
        }
    
</style>
</head>
<body>
    <div>
        <input type="text" id="getInput" placeholder="请输入搜索内容"> <span id="handleBtn">搜索</span>
    </div>
    
    <div class="history_content" id="history_content">

    </div>
    <script>
        var getInputId = document.getElementById('getInput')
        var history_content_id = document.getElementById('history_content')
        var handleBtn_id = document.getElementById('handleBtn')
        
        handleBtn_id.addEventListener('click',function(){
            if(getInputId.value){
                var searchList;
                if(localStorage.length<1) {
                    searchList = [];
                    searchList.push(getInputId.value)
                }else if(JSON.parse(localStorage.searchList).length > 6){
                    searchList = JSON.parse(localStorage.searchList)
                    if(searchList.indexOf(getInputId.value)<0){
                        searchList.unshift(getInputId.value)
                        searchList.pop(-1)
                    }
                }else{
                    searchList = JSON.parse(localStorage.searchList)
                    if(searchList.indexOf(getInputId.value)<0){
                        searchList.unshift(getInputId.value)
                    }
                }
                localStorage['searchList'] = JSON.stringify(searchList)
                showContent()
            }else{
                alert("请输入搜索内容!")
            }
        })

        function showContent(){
            var str ="";
            JSON.parse(localStorage.searchList).forEach(item => {
                str += `<p>${item}</p>`
            });
            console.log(str);
            history_content_id.innerHTML = str
        }
        showContent()

    
</script>
</body>
</html>

MYSUN

2021/10/19  阅读:34  主题:橙心

作者介绍

MYSUN