使用localStorage替代cookie做本地存储

使用localStorage替代cookie做本地存储主要是为了避免cookie的一些限制，比如存储大小限制、跨域限制等。下面是使用localStorage做本地存储的完整攻略：

1. 检测浏览器是否支持localStorage

if (typeof localStorage === "undefined" || localStorage === null) {
    alert("Sorry, your browser does not support Local Storage.");
}

2. 存储数据

使用localStorage存储数据非常简单，只需要将数据作为键值对存储即可，例如：

localStorage.setItem("name", "Jack");
localStorage.setItem("age", "25");

其中，第一个参数为键，第二个参数为值。

3. 获取数据

使用localStorage获取数据也非常简单，只需要使用getItem方法获取对应键的值即可，例如：

var name = localStorage.getItem("name");
var age = localStorage.getItem("age");

4. 删除数据

使用localStorage删除数据也很简单，只需要使用removeItem方法删除对应的键值对即可，例如：

localStorage.removeItem("age");

示例1：使用localStorage保存用户信息

// 存储用户信息
var user = {
  name: 'Jack',
  age: 25,
  email: '[e-mail]'
};
localStorage.setItem('user', JSON.stringify(user));

// 获取用户信息
var userStr = localStorage.getItem('user');
var userObj = JSON.parse(userStr);
console.log(userObj.name);

在这个示例中，用户信息被存储在了localStorage中，可以随时获取。由于localStorage只能存储字符串类型的数据，因此使用JSON.stringify()将JavaScript对象转换为JSON字符串进行存储，使用JSON.parse()将字符串转换为JavaScript对象进行获取。

示例2：使用localStorage保存用户偏好设置

// 存储用户偏好设置
var settings = {
  theme: 'dark',
  fontSize: '16px',
  language: 'en'
};
localStorage.setItem('settings', JSON.stringify(settings));

// 获取用户偏好设置
var userSettingsStr = localStorage.getItem('settings');
var userSettingsObj = JSON.parse(userSettingsStr);
console.log(userSettingsObj.theme);

在这个示例中，用户的偏好设置被存储在了localStorage中，比如主题、字体大小、语言等。使用方法与示例1类似。