HTML5中Localstorage的使用教程

HTML5中Localstorage是用于在客户端浏览器上存储数据的API，这使得我们可以在浏览器中存储和检索数据，而不需要服务器的帮助。这篇文章将会介绍HTML5 Localstorage在Web应用程序中的使用方式，包括了创建，添加和检索基于关键字的数据，并且提供了两个本地存储的例子，帮助读者更好地理解Localstorage的使用。

简介

Localstorage是浏览器的一种存储机制，允许Web应用程序在客户端本地存储数据。Localstorage遵循键值对存储的方式，一般情况下，我们使用setitem()、getItem()、removeItem()、clear()方法执行Localstorage的读写操作。Localstorage中存储的数据类型只能是字符串，所以我们将对象以字符串的形式存储起来。同时，Localstorage不支持网站的访问限制，所有网站都可以在客户端访问同一数据。

创建Localstorage项

要创建一个Localstorage项，我们需要使用setItem()方法，该方法需要两个参数 - 键和值。例如：

localStorage.setItem('myName', 'Tom');

这将在Localstorage中创建一个名为'myName'，值为'Tom'的键值对。键和值都必须是String类型的。如果您尝试使用其他类型应用setItem()，您将得到非预期的结果。

检索Localstorage项

我们可以使用getItem()方法从Localstorage中检索数据。该方法需要传入一个键，以返回与该键关联的值，例如：

var myName = localStorage.getItem('myName');
console.log(myName);

上面的代码中，我们检索名为'myName'的本地存储项，并将其存储到变量'myName'中。然后，我们使用console.log()打印输出'我的名字是Tom'。

删除Localstorage项

可以使用removeItem()方法从Localstorage中删除项。例如：

localStorage.removeItem('myName');

上面的代码将删除名称为'myName'的本地存储项。

示例一：保存用户设置

假设我们正在制作一个网站，用户可以更改各种设置。我们可以使用Localstorage来存储用户的配置并在下次访问时使用。在下面的示例中，我们将以字符串的形式保存用户配置的对象：

// 假设用户选择了以下设置
var userSettings = {
  'theme': 'dark',
  'fontSize': '16px',
  'language': 'zh-CN'
};

// 以字符串的形式将设置存储到Localstorage中
localStorage.setItem('userSettings', JSON.stringify(userSettings));

// 获取用户设置
var settings = localStorage.getItem('userSettings');

// 将字符串转换为对象
settings = JSON.parse(settings);

上面的示例中，我们将以字符串的形式存储了用户设置，然后我们使用getItem()方法检索了用户设置，接着我们将获取的字符串转换为一个对象。这样，我们就可以直接使用result中的属性。

示例二：购物车应用

假设我们正在制作一个在线购物车应用，我们可以使用Localstorage来存储当前选中的商品。在下面的示例中，我们将设置添加选中的商品，并从本地存储中获取商品。

// 假设我们有一些商品
var products = [
  {id: 1, name: 'iPhone12', price: 7999},
  {id: 2, name: '华为P40', price: 5999},
  {id: 3, name: '小米11', price: 3999},
  {id: 4, name: 'OPPO R17', price: 2999}
];

// 用户添加商品到购物车的功能
function addItem(product) {
  // 1. 获取当前购物车中的商品(以数组的形式存储)
  var items = localStorage.getItem('items');

  // 2. 如果购物车中没有商品，则初始化为空数组
  if (items === null) {
    items = [];
  } else {
    // 3. 如果有已选择的商品，则转化为对象
    items = JSON.parse(items);
  }

  // 4. 将新的商品加入数组
  items.push(product);

  // 5. 将购物车存储回本地存储中
  localStorage.setItem('items', JSON.stringify(items));
}

// 获取购物车中的商品列表
function getItems() {
  var items = localStorage.getItem('items');
  if (items === null) {
    return [];
  } else {
    return JSON.parse(items);
  }
}

console.log(getItems()); // []
addItem(products[0]); // 将商品iPhone12加入购物车
console.log(getItems()); // [{id: 1, name: 'iPhone12', price: 7999}]

上面的示例中，我们为购物车创建了两个函数，addItem()用于添加商品，getItems()用于从本地存储中获取当前购物车的商品列表。在addItem()函数中，我们检索购物车的当前列表，将新商品添加到该列表末尾，然后将更新后的列表以字符串形式存储回Localstorage。

总结

通过这篇文章，我们已经了解到如何使用HTML5中的Localstorage来存储和检索数据。记住，Localstorage只能存储字符串类型的值，如果您需要存储其他类型的数据，可以将其转换为字符串。本文通过两个实例展示了Localstorage的用途，也可以在其他的应用中使用Localstorage，例如登录程序、备忘录或其他应用程序。