Question

如何将此代码编入cookie以记住用户选择的文本大小？

function resizeText(multiplier) {
  if (document.body.style.fontSize == '') {
      document.body.style.fontSize = '1.0em';
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + 'em';
}
$("plustext").addEvent("click", function() {resizeText(1);});
$("minustext").addEvent("click", function() {resizeText(-1);});

如果您无法通过我的问题说出来......我是Cookie和JavaScript的新手。顺便说一句，我不想重写我在这里发布的完整代码，因为它完美地工作......我只想添加cookie。

Answer 1

您需要使用Web Storage API。由于这似乎是您正在构建的插件，我将包装Storage API方法并使用前缀来防止干扰可能在页面上运行的其他脚本（正如我在下面的示例中所做的那样）。

我冒昧地扩展你的例子以更好地演示用法，并且我已经删除了所有jQuery废话。

Here's a demo showing it in action

const textResizePlugin = scope => {
    if(!(scope instanceof Node)) {
        throw new Error('Invalid scope supplied');
    }

    const style = scope.style;
    const prefix = 'textResizePlugin_';

    if(scope.classList.contains(`${prefix}active`)) {
        throw new Error('Already initialized');
    } else {
        scope.classList.add(`${prefix}active`);
    }

    const storage = {
        get: (key) => window.localStorage.getItem(prefix + key),
        set: (key, val) => window.localStorage.setItem(prefix + key, val)
    };

    const setSize = size => {
        storage.set('fontSize', size);
        style.fontSize = size;
    };

    setSize(storage.get('fontSize'));

    const resize = m => setSize(
        (style.fontSize||"1.0em").replace(/[\d.]+/, num => +num + m * 0.2)
    );

    const html = `
        <div id="${prefix}bar">
            <button id="${prefix}less">-</button>
            <button id="${prefix}more">+</button>
        </div>
        <style type="text/css">
            #${prefix}bar {
                background: rgba(200,200,200,0.3);
                position: fixed;
                font-size: 0px !important;
                top: 0;
                width: 100%;
                padding: 5px;
                text-align: right;
                box-sizing: border-box;
            }
        </style>
    `;

    scope.insertAdjacentHTML('afterbegin', html);
    const [less, more] = scope.querySelectorAll(`#${prefix}less, #${prefix}more`);

    less.addEventListener('click', () => resize(-1));
    more.addEventListener('click', () => resize(1));
};

textResizePlugin(document.body);

如何使用Cookie使此TextResize JS代码记住文本大小

1 个答案: