JS-本地存储

最新推荐文章于 2023-06-07 15:56:22 发布

cuter、

最新推荐文章于 2023-06-07 15:56:22 发布

阅读量82

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45077672/article/details/117198433

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本地存储

一、本地存储
二、window.sessionStorage
三、window.localStorage

一、本地存储

1.本地存储里面只能村粗字符串的数据格式，把我们数组对象转换为字符串格式 json.stringify（）
2.获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式 json.parse（）

 <script>
        var todolist = [{
            title: '我今天吃八个馒头',
            done: false
        }, {
            title: '我今天学习jq',
            done: false
        }, ];
        // localStorage.setItem("todo", todolist);
        // 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data);
        // console.log(data[0].title);
        // 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0].title);
    </script>

在这里插入图片描述

二、window.sessionStorage

在这里插入图片描述

<body>
    <input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        set.addEventListener('click', function() {
            //当我们点击之后就把表单里面值存储起来
            var val = input.value;
            sessionStorage.setItem('uname', val);
        })
        get.addEventListener('click', function() {
            //当我们点击之后就把表单里面值存储起来
            // var val = input.value;
            var num = sessionStorage.getItem('uname');
            console.log(num);
        })
        remove.addEventListener('click', function() {
            sessionStorage.removeItem('uname');
        })
    </script>
</body>

三、window.localStorage

在这里插入图片描述

  <input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            localStorage.setItem('username', input.value)
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })
        del.addEventListener('click', function() {
            localStorage.clear();
        })
    </script>

记住用户名案例

<!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" name="" id="inp">
    <input type="checkbox" name="" id="pwd">记住用户名
    <script>
        var input = document.getElementById('inp');
        var pwd = document.getElementById('pwd');
        if (localStorage.getItem('username')) {
            input.value = localStorage.getItem('username');
            pwd.checked = true;
        }
        pwd.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', input.value);
            } else {
                localStorage.removeItem('username')
            }
        })
    </script>

</body>

</html>

cuter、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-本地存储

本地存储一、本地存储二、window.sessionStorage一、本地存储二、window.sessionStorage<body> <input type="text" name="" id=""> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove"&gt
复制链接

扫一扫