浏览器本地存储 sessionStorage和localStorage

一. sessionStorage和localStorage的Api是一样的,都是四种

// 保存一个数据
setItem(key,value)
// 读取一个数据
getItem(key)
// 删除一个数据
removeItem(key)
// 清空所有数据
clear()

// 注意:4个方法里面的key和value都是字符串类型的

二. 下面是具体例子:
localStorage使用:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<h2>localStorageh2>
<button onclick="saveData()">点我保存一个数据button>
<button onclick="readData()">点我读取一个数据button>
<button onclick="deleteData()">点我删除一个数据button>
<button onclick="deleteAllData()">点我清空所有数据button>

<script>
  let p={name:'Bob',age:19};

  function saveData() {
    //注意:setItem里面的key和value都是字符串类型的,如果传入的不是字符串,
    // 就会调用 toString 方法 把它变为字符串
    window.localStorage.setItem('msg','hello');
    localStorage.setItem('msg2',666);

  //  保存对象的方式:注意: toString , JSON.stringify 和 JSON.parse 的区别
    localStorage.setItem('person',JSON.stringify(p));

  }

  function readData() {
    console.log(localStorage.getItem('msg2'));

    const res=localStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1=localStorage.getItem('p');
    console.log(JSON.parse(res1));
  }

  function deleteData() {
    localStorage.removeItem('msg2');
  }

  function deleteAllData() {
    localStorage.clear();
  }

script>
body>
html>

sessionStorage使用:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<h2>sessionStorageh2>
<button onclick="saveData()">点我保存一个数据button>
<button onclick="readData()">点我读取一个数据button>
<button onclick="deleteData()">点我删除一个数据button>
<button onclick="deleteAllData()">点我清空所有数据button>

<script>
  let p = {name: 'Bob', age: 19};

  function saveData() {
    //注意:setItem里面的key和value都是字符串类型的,如果传入的不是字符串,
    // 就会调用 toString 方法 把它变为字符串
    window.sessionStorage.setItem('msg', 'hello');
    sessionStorage.setItem('msg2', 666);

    //  保存对象的方式:注意: toString , JSON.stringify 和 JSON.parse 的区别
    sessionStorage.setItem('person', JSON.stringify(p));

  }

  function readData() {
    console.log(sessionStorage.getItem('msg2'));

    const res = sessionStorage.getItem('person');
    console.log(JSON.parse(res));

    const res1 = sessionStorage.getItem('p');
    console.log(JSON.parse(res1)); // 没有key的就输出null
  }

  function deleteData() {
    sessionStorage.removeItem('msg2');
  }

  function deleteAllData() {
    sessionStorage.clear();
  }

script>
body>
html>

三. 怎样查看浏览器的本地缓存呢?
打开浏览器的控制台,找到application,找到 Local Storage和 Session Storage
浏览器本地存储 sessionStorage和localStorage_第1张图片

四. localStorage 和 sessionStorage的区别是什么?

localStorage 在关闭浏览器页面的时候,数据也不会清除,除非是手动调用API或者清除浏览器缓存等,数据才会消失不见。

sessionStorage 在关闭浏览器页面的时候,数据会清除。

但是他们两个的API都是完全一样的。

你可能感兴趣的:(开发中的实用方法和函数,浏览器使用,html5,javascript,html)