有勇气的牛排博客
☰

html5 LocalStorage本地存储介绍

有勇气的牛排 423 前端 2023-05-18 22:39:28

文章目录

前言

Web存储对象有localStorage和sessionStorage两种，它允许我们以键值对的形式在浏览器上保存数据。

相同点

属性 说明
setItem(key, value) 存储键值对
getItem(key) 获取键的值
removeItem(key) 删除指定键
clear 删除所有数据
key(index) 获取对应索引的键名
length 存储键值对数据

1 LocalStorage

1.1 LocalStorage介绍

特点：

  • localStorage 用于长久保存网站数据，无过期时间，除非删除。
  • 在同源的所有标签页与窗口之间数据共享。
  • 存储字段类型为字符串，使用需自己转换为所需类型

1.2 检测浏览器是否支持

if (window.localStorage) {
    alert('该浏览器支持 localStorage');
} else {
    alert('该浏览器不支持localStorage！！！');
}

1. 3 LocalStorage读写

1.3.1 写/读/删 操作

写：有三种方式如下代码所示
删除键：localStorage.removeItem("你的key值")
全部清空：localStorage.clear()

// 三种写方法
localStorage.nick = "有勇气的牛排";
localStorage["uid"] = 1;
localStorage.setItem("lv", "9");

// 三种读方法
console.log(localStorage.nick)
console.log(localStorage["uid"])
console.log(localStorage.getItem("lv"))

// 通用删除
localStorage.removeItem("nick")
localStorage.removeItem("uid")
localStorage.removeItem("lv")

// delete 删除方法
// delete localStorage.nick

// 全部清除
// localStorage.clear()

// 读
console.log("---")
console.log(localStorage.nick)
console.log(localStorage["uid"])
console.log(localStorage.getItem("lv"))
console.log("---")

1.3.2 查看所有键值对

方法：key()

// 写
localStorage.nick = "有勇气的牛排";
localStorage["uid"] = 1;
localStorage.setItem("lv", "9");

// 遍历所有键值对
for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key)
    console.log(key + " : " + value)
    // alert(`${key}: ${localStorage.getItem(key)}`);
}

image.png

1.3.3 存储json对象

// 存储json对象
localStorage.userinfo = JSON.stringify({uid: 1, nick: "有勇气的牛排"})

// 读取
let userinfo = JSON.parse(localStorage.userinfo)

console.log(userinfo.uid)
console.log(userinfo.nick)

2 sessionStorage

2.1 sessionStorage介绍

使用方法同localStorage，但是有如下不同：

  • 数据仅存在于当前浏览器标签页。
  • 同源且同一标签页下的iframe之间数据共享。
  • 具有相同页面的另一个标签页将会有不同的存储。
  • 浏览器关闭后，数据不保留。

2.2 使用方法

请参考localStorage

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流