客户端存储换肤案例

最新推荐文章于 2022-12-02 00:49:46 发布

东北玛丽的小笔记

最新推荐文章于 2022-12-02 00:49:46 发布

阅读量133

点赞数

分类专栏： H5C3 案例

本文链接：https://blog.csdn.net/weixin_44614856/article/details/88418012

版权

H5C3 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

案例

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="box" id="box">
    <option value="">默认皮肤</option>
    <option value="red">红色皮肤</option>
    <option value="blue">蓝色皮肤</option>
    <option value="green">绿色皮肤</option>
    <option value="pink">粉红皮肤</option>
</select>
<script>
    /*1. 当页面初始化的时候*/
    /*2 根据存储的颜色设置背景*/
    /*3. 设置下拉菜单选择存储的颜色 */
    var body = document.querySelector('body');
    var box = document.querySelector('#box');
    //约定KEY    bdbg

    /*
    * localStorage.setItem(key, value)
    *  {
    *       name: 'Jack'
    *  }
    *
    * localStorage.getItem(key)   =>   value
    * */

//
//    var num = 1 - 1 || '';
//    console.log(num)

    var bg = localStorage.getItem('bdbg') || '';
    body.style.background = bg;
    box.value = bg; //null 选择不中  ''默认

    /*1. 选择的时候*/
    /*2. 设置背景颜色*/
    /*3. 存储背景颜色*/
    box.onchange = function () {
        var bg = this.value;
        body.style.background = bg;
        localStorage.setItem('bdbg',bg);
    }
</script>
</body>
</html>