要保护HTML本地存储，可以使用以下方法：

1. 使用加密存储：在存储数据之前，对数据进行加密处理。这样即使有人访问到存储的数据文件，也无法直接读取到明文数据。可以使用AES加密算法等进行加密处理。

示例代码：

// 密钥
var key = 'mySecretKey';

// 加密函数
function encryptData(data) {
  var encryptedData = CryptoJS.AES.encrypt(data, key);
  return encryptedData.toString();
}

// 解密函数
function decryptData(encryptedData) {
  var decryptedData = CryptoJS.AES.decrypt(encryptedData, key);
  return decryptedData.toString(CryptoJS.enc.Utf8);
}

// 存储数据
var data = 'Hello World';
var encryptedData = encryptData(data);
localStorage.setItem('encryptedData', encryptedData);

// 读取数据
var storedData = localStorage.getItem('encryptedData');
var decryptedData = decryptData(storedData);
console.log(decryptedData);

2. 使用访问控制：可以通过限制对本地存储的访问来保护数据。只允许特定的域名或URL访问本地存储，可以使用CORS（跨域资源共享）来实现访问控制。

示例代码：

// 设置访问控制
localStorage.setItem('accessControl', 'example.com');

// 读取数据
function getData() {
  if (window.location.origin === localStorage.getItem('accessControl')) {
    var data = localStorage.getItem('data');
    console.log(data);
  } else {
    console.log('Access denied');
  }
}

getData();

3. 使用加密的本地存储方案：可以使用第三方库或框架来实现加密的本地存储。这些方案通常会自动处理数据的加密和解密，提供更高级的安全性。

示例代码（使用lockr库）：

// 存储数据
var data = 'Hello World';
lockr.set('data', data);

// 读取数据
var storedData = lockr.get('data');
console.log(storedData);

以上是几种保护HTML本地存储的方法和示例代码。根据实际情况选择适合的方法进行保护。