0
点赞
收藏
分享

微信扫一扫

html5 LocalStorage本地存储介绍


文章目录

  • ​​前言​​
  • ​​1 LocalStorage​​
  • ​​1.1 LocalStorage介绍​​
  • ​​1.2 检测浏览器是否支持​​
  • ​​1. 3 LocalStorage读写​​
  • ​​1.3.1 写/读/删 操作​​
  • ​​1.3.2 查看所有键值对​​
  • ​​1.3.3 存储json对象​​
  • ​​2 sessionStorage​​
  • ​​2.1 sessionStorage介绍​​
  • ​​2.2 使用方法​​

前言

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)}`);
}

html5 LocalStorage本地存储介绍_html5

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


举报

相关推荐

0 条评论