JavaScript本地存储实现用户名存储案例

要实现JavaScript本地存储，可以使用浏览器提供的localStorage对象。该对象可以存储键值对，在页面刷新甚至关闭浏览器后依然可以保留数据。

下面是实现一个用户名存储的案例，步骤如下：

步骤一：检查浏览器是否支持localStorage对象

首先检查浏览器是否支持localStorage对象。可以使用以下代码：

if (typeof(Storage) !== "undefined") {
  // 浏览器支持localStorage对象
} else {
  // 浏览器不支持localStorage对象
}

步骤二：存储用户名

要存储用户名，可以使用localStorage.setItem(key, value)方法。其中，key是要存储的键名，value是要存储的值。

示例代码如下：

// 存储用户名
var username = "Tom";
localStorage.setItem("username", username);

步骤三：读取用户名

要读取存储的用户名，可以使用localStorage.getItem(key)方法，其中key为存储时使用的键名。

示例代码如下：

// 读取存储的用户名
var storedUsername = localStorage.getItem("username");
console.log(storedUsername); // 输出Tom

步骤四：删除存储的数据

要删除存储的数据，可以使用localStorage.removeItem(key)方法，其中key为要删除的数据的键名。

示例代码如下：

// 删除存储的用户名
localStorage.removeItem("username");

示例说明1：存储用户信息

可以将用户信息存储到localStorage中，例如用户名、密码、个人资料等。实现代码如下：

// 存储用户信息
var user = {
  username: "Tom",
  password: "123456",
  profile: {
    name: "Tom Lee",
    age: 20,
    gender: "male"
  }
};
localStorage.setItem("user", JSON.stringify(user)); // 对象需要先转成JSON字符串

示例说明2：判断用户是否已登录

可以将用户登录状态存储到localStorage中，例如是否已经登录、登录时间等。实现代码如下：

// 存储登录状态
var isLoggedIn = true;
localStorage.setItem("isLoggedIn", isLoggedIn);

// 判断用户是否已登录
var isLoggedIn = localStorage.getItem("isLoggedIn");
if (isLoggedIn === "true") {
  console.log("用户已登录");
} else {
  console.log("用户未登录");
}

以上是JavaScript本地存储实现用户名存储的完整攻略，希望对你有所帮助。