文章目录

  • 前言
  • 一，本地存储的特性
  • 二、window.sessionStorage
  • 1.sessionStorage的特性
  • 2.方法
  • 二、window.localStorage
  • 1.localStorage的特性
  • 2.方法
  • 3.localStorage方法存储和读取数据：


前言

学习中遇到的问题总结一下~

  • 本地存储的作用主要是将数据存储到浏览器中，相比于将数据存储到数据库中，在使用是再从数据库中调用的方法操作更简便，也减少了内存的占用。
  • 本地存储主要分为三种，这里主要介绍sessionStorage和localStorage

一，本地存储的特性

  1. 数据存储在用户浏览器中
  2. 设置，读取方便，甚至刷新页面数据也不会丢失
  3. 容量较大，sessionStorage约5M，localStroage约20M
  4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

二、window.sessionStorage

1.sessionStorage的特性

1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对的样式存储使用

2.方法

  1. 存储数据：
sessionStorage.setItem(key,value)
  1. 获取数据：
sessionStorage.getItem(key)

3 删除数据：

sessionStorage.removeItem(key)
  1. 删除所有数据：
sessionStorage.clear()

二、window.localStorage

1.localStorage的特性

1.生命周期永久生效，除非手动删除，否则关闭页面也会存在
2.可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用

2.方法

  1. 存储数据：
localStorage.setItem(key,value)
  1. 获取数据：
localStorage.getItem(key)
  1. 删除数据：
localStorage.removeItem(key)
  1. 删除所有数据：
localStorage.clear()

3.localStorage方法存储和读取数据：

本地存储的方式是以字符串的形式进行存储的，所以如果我们需要存储其他类型的数据，需要使用JSON的方法将类型进行转换

存储数据
存储非字符串类型的数据时，如果直接对数据进行存储，则设置进入本地的实际值为 [object Object]，[object Object] 存入数据时值为对象，获取的时候不能正确获取到我们存入的数据，这时就需要使用JSON.stringify()方法把数据转换成字符串的形式进行存储

var Data = {name:"Tom"}
data = JSON.stringify(Data);
localStroage.setItem("MyData",data);

这样就可以将数据以字符串的形式存储了

读取数据：
本地存储里面的数据是以字符串格式存储的，而我们需要调用的是对象格式的数据，所以在读取数据时需要使用JSON.parse()方法将数据转换为对象格式

var data = localStroage.getItem("MyData");
if(data!==null){
    return JSON.parse(data);
}else{
    return [];
}