JavaScript存储对象(+实例)

最新推荐文章于 2023-08-28 19:34:14 发布

马奇德德

最新推荐文章于 2023-08-28 19:34:14 发布

阅读量283

点赞数 1

分类专栏： javaScript 周记生活文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/www340300/article/details/129538721

版权

周记生活同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

javaScript

6 篇文章 0 订阅

订阅专栏

本地存储的特性

数据存储在用户的浏览器中

设置，读取方便，甚至页面刷新都不丢失

容量比较大，比如sessionStorage大约是5M,localStorage约是20M

sessionStorage

特点

声明周期是关闭整个浏览器窗口

在同一个窗口或者是页面下数据可以共享

数据以键值对的形式存储

存储数据语法规范

由于sessionStorage是属于window对象的，且window是可以省略的，所以可以直接写成如下格式

sessionStorage.setItem(key,value)

获取数据语法规范

sessionStorage.getItem(key)

删除数据语法规范

sessionStorage.removeItem(key)

删除所有的数据

sessionStorage.clear()

window.localStorage

特点

1.声明周期永远生效，就算关闭页面也回存在，

2.而且可以多窗口（页面）共享（同一浏览器可以共享）

可以以键值对的形式来存储

语法规范

基本和sessionStorage相同，即localStorage.clear(key),localStorage.removeItem(key)......

记住用户名练习

功能简介

将用户名输入文本框中，勾选记住用户名，用户名将被页面记住，即使将页面关闭，下一次打开，会直接显示被记住的用户名

代码

<!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" id="username"><input type="checkbox" name="" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');

        if (localStorage.getItem('username')) {
            //如果有，就将数据取过来赋值给文本框，
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        //当复选框发生了改变的时候，添加一个change事件
        remember.addEventListener('change', function () {
            if (this.checked) {

                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>

</body>

</html>