导航
导航
文章目录
  1. 一、localStorage和sessionStorage操作
  2. 1.setItem存储value
  3. 2.getItem获取value
  4. 3.removeItem删除key
  5. 4.clear清除所有的key/value
  6. 5.其他操作方法:点操作和[]
  7. 6.localStorage和sessionStorage的key和length属性实现遍历
  8. 二、实例
  9. 1.localStorage/sessionStorage存取数组
  10. 2.localStorage存取对象

本地存储sessionStorage与localStorage

  • sessionStorage 数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。
  • localStorage 是一个持久化的存储,它并不局限于会话。除非主动删除数据,否则数据是永远不会过期的。

一、localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

1.setItem存储value

1
2
sessionStorage.setItem("name", "hzzly");
localStorage.setItem("blog", "hzzly.github.io");

2.getItem获取value

1
2
let name = sessionStorage.getItem("name");
let blog = localStorage.getItem("blog");

3.removeItem删除key

1
2
sessionStorage.removeItem("name");
localStorage.removeItem("blog");

4.clear清除所有的key/value

1
2
sessionStorage.clear();
localStorage.clear();

5.其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储及读取,像如下的代码:

1
2
3
4
5
6
7
8
9
10
//存
localStorage.name = "hzzly";
localStorage["age"] = "21";
sessionStorage.name = "hzzly";
sessionStorage["age"] = "21";
//取
let name1 = localStorage.name
let age1 = localStorage["age"]
let name2 = sessionStorage.name
let age2 = sessionStorage["age"]

6.localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

1
2
3
4
5
6
var storage = window.localStorage; 
for (var i=0, len = storage.length; i < len; i++){
let key = storage.key(i);
let value = storage.getItem(key);
console.log(key + "=" + value);
}

二、实例

storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储,可以用下面两个方法进行转换:

  • JSON.stringify() 用于从一个对象解析出字符串
  • JSON.parse() 用于从一个字符串中解析出json对象

1.localStorage/sessionStorage存取数组

1
2
3
4
5
6
//存
let language = ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'Vue', 'React']
localStorage.language = JSON.stringify(language)
sessionStorag.language = JSON.stringify(language)
//取
let storageLanguage = JSON.parse(localStorage.language)

2.localStorage存取对象

1
2
3
4
5
6
7
8
9
10
11
//存
let myInfo = {
'name': 'hzzly',
'age': 21,
'school': 'ECUT',
'city': 'NanChang'
}
localStorage.myInfo = JSON.stringify(myInfo)
sessionStorag.myInfo = JSON.stringify(myInfo)
//取
let storageLanguage = JSON.parse(localStorage.myInfo)