localStorage学习

最新推荐文章于 2024-06-11 16:47:46 发布

黄酱！

最新推荐文章于 2024-06-11 16:47:46 发布

阅读量101

点赞数

分类专栏： JS 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/tianranran/article/details/121924912

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

本文详细介绍了浏览器的localStorage和sessionStorage特性，包括它们的用途、存储方式、数据持久性和使用示例。重点展示了如何在JavaScript中设置、获取和删除数据，以及sessionStorage的临时性特点。

摘要由CSDN通过智能技术生成

定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。


 <title>持久化存储</title>
    <!-- 
        临时存储
           定义的变量，数组存储的数据就是临时存储在内存中的，
           程序启动在创建，程序运行结束消失

        持久化存储
           电脑硬盘中数据
        


语法
window.localStorage
保存数据语法：

localStorage.setItem("key", "value");
读取数据语法：

var lastname = localStorage.getItem("key");
删除数据语法：

localStorage.removeItem("key");
        
        

     -->
</head>
<body>
    <script>
        let arr = [
            {username:'jack',age:20},
            {username:'rose',age:21},
        ]

        console.log(arr);

<body>
    <h2>localStorage持久存储学习</h2>
    <button class="add-btn">添加</button>
    <button class="show-btn">显示</button>
    <button class="delete-btn">删除</button>

    <p class="info"></p>
    <script>
        //获取按钮元素
        const addBtn = document.querySelector('.add-btn')
        const deleteBtn = document.querySelector('.delete-btn')
        const showBtn = document.querySelector('.show-btn')
        const infoEle = document.querySelector('.info')

        // 添加操作
        function add() {
            localStorage.setItem('username', 'jack')  //在电脑本地持久化存储一条数据，名称是username,值是jack
            localStorage.setItem('age', 20) //持久存储一条数据，名称是age,值是20
            let obj = { username: 'jack', age: 20 }
            // localStorage.setItem('user',obj) //不能直接存储对象
            localStorage.setItem('user', JSON.stringify(obj))

        }

        // 获取操作在p标签打印
        function get() {
            let userStr = localStorage.getItem('user')
            let userObj = JSON.parse(userStr) //json字符中转对象
            console.log(userObj);
            infoEle.innerHTML = userObj.username + '  '+ userObj.age
        }

        // 添加事件
        addBtn.onclick = function(){
            add()
        }

        // 打印
        showBtn.onclick = function(){
            get()
        }

        // 删除
        deleteBtn.onclick = function(){
            localStorage.removeItem('username')
            localStorage.removeItem('age')
        }

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
localStorage学习

定义和使用localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 <title>持久化存储</title
复制链接

扫一扫

专栏目录