使用LocalStorage持久化网页模板的RTL/LTR布局设置

本文旨在解决前端模板RTL/LTR方向设置在页面刷新后失效的问题。通过引入浏览器localStorage机制，我们将学习如何持久化用户的布局偏好。核心方法是将方向切换逻辑封装为可复用函数，并在页面加载时从localStorage读取并应用保存的设置，同时在用户修改方向时更新localStorage，确保用户选择的布局在不同会话中保持一致。

在前端开发中，我们经常需要提供用户界面（UI）的个性化设置，例如主题颜色、字体大小，或是文本方向（从左到右 LTR 或从右到左 RTL）。当用户通过界面切换这些设置时，期望这些偏好能够在页面刷新后依然保留。然而，如果仅仅通过J*aScript动态修改DOM属性，这些更改在页面重新加载时就会丢失，因为浏览器会重新渲染初始HTML。本文将详细介绍如何利用localStorage这一Web存储API来持久化RTL/LTR方向设置。

理解问题：瞬时性DOM修改

最初的实现通常涉及一个UI控件（例如一个下拉选择框），当用户选择不同的方向时，J*aScript会直接修改html>和

元素的dir属性和类名。

var dzSwitcher = '<div><p>Direction</p><select class="form-control" name="theme_direction" id="theme_direction"><option value="ltr">LTR</option><option value="rtl">RTL</option></select></div>';

(function($) {
    "use strict";
    // 假设 addSwitcher() 会将 dzSwitcher 添加到DOM
    // addSwitcher(); 
    const body = $('body');
    const html = $('html');
    const themeDirectionSelect = $('#theme_direction');

    // 监听方向选择器的变化
    themeDirectionSelect.on('change', function() {
        html.attr('dir', this.value);
        html.attr('class', ''); // 清除现有类
        html.addClass(this.value); // 添加新的方向类
        body.attr('direction', this.value); // 也可能修改body的自定义属性
    });
})(jQuery);

这段代码能够即时响应用户的选择，改变页面的文本方向。但问题在于，这些修改仅存在于当前会话的DOM中。一旦用户刷新页面，浏览器会重新加载原始的HTML和CSS，J*aScript代码会重新执行，而之前的DOM修改则被重置，页面回到了默认的LTR布局。为了解决这个问题，我们需要一种机制来“记住”用户的选择。

解决方案：利用 localStorage 进行持久化

localStorage是Web存储API的一部分，允许Web应用程序在用户的浏览器中存储数据，且这些数据没有过期时间，即使浏览器关闭再打开，数据依然存在（直到用户手动清除）。这使得localStorage成为存储用户偏好设置的理想选择。

核心思路

1. 封装方向切换逻辑： 将修改DOM和保存到localStorage的逻辑封装到一个函数中。
2. 页面加载时恢复： 在页面加载时，检查localStorage中是否有保存的方向设置，如果有，则应用该设置。
3. 用户更改时保存： 当用户通过UI切换方向时，不仅要修改DOM，还要将新的方向保存到localStorage。

实现步骤与代码示例

我们将对原始代码进行重构和增强。

1. 封装方向切换功能

创建一个名为changeDirection的函数，它接收一个方向参数（'ltr'或'rtl'），负责所有与方向相关的DOM操作，并将其保存到localStorage。

const changeDirection = (direction) => {
  $("html").attr('dir', direction); // 设置html的dir属性
  $("html").attr('class', ''); // 清除html的现有类
  $("html").addClass(direction); // 添加新的方向类
  $("body").attr('direction', direction); // 设置body的自定义direction属性
  localStorage.setItem("direction", direction); // 将当前方向保存到localStorage
};

这个函数是解决方案的核心，它确保了每次方向改变都会同步更新到持久化存储中。

仿虎嗅网*教育门户源码2.0

仿虎嗅商学院*教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。

0 查看详情

2. 页面加载时恢复保存的方向

当页面加载完成后，我们需要检查localStorage中是否存在之前保存的方向设置。如果存在，就调用changeDirection函数来应用它，并同时更新UI选择器的显示值，以保持一致性。

// 获取localStorage中保存的方向
const s*edDirection = localStorage.getItem("direction");

// 如果存在保存的方向，则应用它
if (s*edDirection) {
    changeDirection(s*edDirection); // 应用保存的方向到DOM
    $("#theme_direction").val(s*edDirection); // 更新UI选择器的值
}

这段代码确保了用户在下次访问时，页面会自动恢复到他们上次选择的布局方向。

3. 整合UI切换与持久化

现在，我们需要将这个持久化逻辑集成到我们的UI切换器中。当用户通过下拉菜单选择一个方向时，我们不再直接操作DOM，而是调用我们封装好的changeDirection函数。

// 假设 dzSwitcher 已经被添加到DOM中
const dzSwitcher = '<div><p>Direction</p><select class="form-control" name="theme_direction" id="theme_direction"><option value="ltr">LTR</option><option value="rtl">RTL</option></select></div>';
$("body").append(dzSwitcher); // 将选择器添加到body中

// 监听方向选择器的变化事件
$(document).on("change", '#theme_direction', function() {
  changeDirection(this.value); // 调用封装函数，它会自动修改DOM并保存到localStorage
});

完整代码示例

将所有部分整合在一起，形成一个完整的、可运行的J*aScript代码块：

(function($) {
    "use strict";

    // UI选择器HTML字符串
    const dzSwitcher = '<div><p>Direction</p><select class="form-control" name="theme_direction" id="theme_direction"><option value="ltr">LTR</option><option value="rtl">RTL</option></select></div>';

    // 封装方向切换和持久化逻辑的函数
    const changeDirection = (direction) => {
      $("html").attr('dir', direction);
      $("html").attr('class', '');
      $("html").addClass(direction);
      $("body").attr('direction', direction);
      localStorage.setItem("direction", direction); // 关键：保存到localStorage
    };

    // 将UI选择器添加到页面中
    $("body").append(dzSwitcher);

    // 监听UI选择器的变化事件
    $(document).on("change", '#theme_direction', function() {
      changeDirection(this.value); // 调用封装函数
    });

    // 页面加载时，检查并应用保存的方向
    const s*edDirection = localStorage.getItem("direction");

    if (s*edDirection) {
        changeDirection(s*edDirection); // 应用保存的方向
        $("#theme_direction").val(s*edDirection); // 更新UI选择器的显示值
    }

})(jQuery);

注意事项

• localStorage 数据类型： localStorage 只能存储字符串。在我们的例子中，'ltr'和'rtl'本身就是字符串，所以不需要额外处理。如果存储复杂对象，需要使用JSON.stringify()进行序列化，并在读取时使用JSON.parse()进行反序列化。
• 容量限制： localStorage 的存储容量有限，通常为5MB左右，这对于存储用户偏好设置是足够的。
• 同源策略： localStorage 遵循同源策略，即只有来自同一域名、协议和端口的页面才能访问彼此的localStorage数据。
• 用户清除数据： 用户可以通过浏览器设置手动清除localStorage数据。在这种情况下，页面将回退到默认的LTR布局，这通常是可接受的用户体验。
• 默认值： 确保在localStorage中没有找到保存的方向时，页面能正确显示默认的布局（通常是LTR）。我们的代码通过不执行if (s*edDirection)块来自然实现这一点。

总结

通过将方向切换逻辑与localStorage结合，我们成功地实现了前端模板RTL/LTR方向设置的持久化。这种方法不仅提升了用户体验，使得用户的个性化设置在多次访问间得以保留，而且结构清晰，易于维护。localStorage作为一种简单而有效的客户端存储方案，在处理这类用户偏好设置时展现了其强大的实用性。

以上就是使用LocalStorage持久化网页模板的RTL/LTR布局设置的详细内容，更多请关注其它相关文章！