<!--
 * @Author: LZJ 颖9兮@yingliu555
 * @Date: 2022-10-19 11:59:48
 * @LastEditors: LZJ 颖9兮@yingliu555
 * @LastEditTime: 2022-10-19 15:02:09
 * @FilePath: /fhrons-pc/src/views/testPage/StorageTest.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月19日 11:59:52-->
<template>
    <div id="StorageTest" class="pd24">
        <h1>存储信息localStorage、sessionStorage</h1>
        <code>
            <p class="line-height30">如果setStorage传入的是key，那么getStorage， removeStorage取的时候也对应着用key</p>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(setCont)">复制</button>
                <pre class="language-js" v-html="toJs(setCont)" />
            </div>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(getCont)">复制</button>
                <pre class="language-js" v-html="toJs(getCont)" />
            </div>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(removeCont)">复制</button>
                <pre class="language-js" v-html="toJs(removeCont)" />
            </div>
            <div class="ps-r">
                <button class="copy-button" @click="handleCopy(clearCont)">复制</button>
                <pre class="language-js" v-html="toJs(clearCont)" />
            </div>
        </code>
    </div>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
    // 组件名称
    name: 'StorageTest',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            setCont: `
    /* name/key: 存储的名字（ key: 自定义的存入缓存的名字，用来兼容不同系统的存储名字规则）
    *           如果传name（不是userGlobalGist）：存入缓存的名字命名规则是Fun-项目名（fhronspc）-当前环境（dev/uat/pro）-name （eg：Fun-fhronspc-uat-userInfo）
    *           如果传name（是userGlobalGist）：存入缓存的名字命名规则是Fun-当前环境（dev/uat/pro）-name （eg：Fun-uat-userGlobalGist）
    *           如果传key：存入缓存的名字命名规则是key（eg：themeColorObj）
    * content: 存储的内容
    * type: 储存到localStorage还是sessionStorage，默认不传是localStorage，传入'session'为sessionStorage
    * needListener: 为true表示被监听了，不传不会监听
    */
    setStorage({ name: 'themeColorObj', content: themeColorObj, needListener: true });
    setStorage({ name: 'themeColorObj', content: themeColorObj, needListener: true });
    setStorage({ key: 'themeColorObj', content: themeColorObj, needListener: true });
    setStorage({ name: 'themeColorObj', content: themeColorObj, type: 'session', needListener: true });
    
    /* 监听一般遇到的场景是：某个页面的渲染或者操作依赖于这个存储信息，然而数据存储也是需要时间的，可能就会存在数据还没存储完，我们就去获取了，这种一般会造成页面渲染不对，或者报错
    * 这里需要注意的是被监听的数据需要在pageStyleMixin处理一下才监听到存储值的变化
    */ 
    /* 例如：监听themeColorObj存储到localStorage没有 */ 

    import { notEmpty } from '@/tool/func';
    import { getStorage } from '@/tool/storage';
    import { applyTheme } from '@/tool/themeFunc';

    export const pageStyleMixin = {
        data() {
            return {
                themeColorObj: getStorage({ name: 'themeColorObj' }) || { themeColor: '#1677FF', subThemeColor: 'rgba(22,119,255,0.1)', litterThemeColor: 'rgba(22,119,255,0.05)', middleThemeColor: 'rgba(22,119,255,0.3)' }
                // 需要监听的其他属性
            };
        },
        watch: {
            // 因为是全局的方法所以直接写在这个页面进行操作了，一般各自页面存储信息的变化各自页面单独监听处理
            themeColorObj: {
                deep: true,
                immediate: true,
                handler(val) {
                    applyTheme(val?.themeColor);
                }
            }
        },
        mounted() {
            this.init();
        },
        beforeDestroy() {
            window.removeEventListener('setItem', this.handleStorage, false);
        },
        methods: {
            // 初始化
            init() {
                window.addEventListener('setItem', this.handleStorage, false);
            },
            handleStorage(e) {
                let eKey = e.key;
                if (notEmpty(e.key)) {
                    const keyArr = e.key.split('-');
                    if (keyArr.length) {
                        eKey = keyArr[keyArr.length - 1];
                    }
                }
                if (eKey === 'themeColorObj') {
                    this.themeColorObj = getStorage({ name: 'themeColorObj' }) || { themeColor: '#1677FF', subThemeColor: 'rgba(22,119,255,0.1)', litterThemeColor: 'rgba(22,119,255,0.05)', middleThemeColor: 'rgba(22,119,255,0.3)' };
                }
                // else if (eKey === '其他属性')
            }
        }
    };

    `,
            getCont: `
    /* name/key: 拿存储的内容的名字，参考setStorage的解释
    * type: 储存到localStorage还是sessionStorage，默认不传是localStorage，传入'session'为sessionStorage
    */
    const token = getStorage({ name: 'token' });
    const token = getStorage({ key: 'token' });
    const token = getStorage({ name: 'token', type: 'session' });
    `,
            removeCont: `
    /* name/key: 拿存储的内容的名字，参考setStorage的解释
    * type: 储存到localStorage还是sessionStorage，默认不传是localStorage，传入'session'为sessionStorage
    */
    removeStorage({ name: 'token' });
    removeStorage({ key: 'token' });
    removeStorage({ name: 'token', type: 'session'  });`,
            clearCont: `
    /* 不传type表示清除全部localStorage缓存， 传入type为'session'表示清除sessionStorage缓存 */
    clearStorage();
    clearStorage({ type: SESSION });`
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        toHtml(str, addStr) {
            return Prism.highlight(str + addStr, Prism.languages.html, 'html');
        },
        toJs(str) {
            return Prism.highlight(str, Prism.languages.js, 'js');
        },
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
