JavaScript本地存储实践sessionStorage

目录

背景回顾

sessionstorage与localStorage对比

使用注意

使用场景

vue中sessionStorage.js封装与使用

1、sessionStorage.js的封装

2、vue其他页面使用

---

背景简介

                 HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

                 localStorage和sessionStorage均属于Web Storage的一部分，属于HTML5重新提供了一种在客户端本地保存数据的功能.

Web Storage又分为两种：

1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

PS:之前写过有关localStorage方面的博客：本地存储实践localStorage

sessionstorage与localStorage对比

区别点	sessionStorage	localStorage
保存周期	临时保存	永久保存
数据生命周期	页面会话期间： 也就是说，在整个浏览器未关闭前，其数据一直都是存在的	除非主动删除，否则一直有效 即使浏览器关闭了，下次打开浏览器时仍然能够读取保存的数据
是否浏览器维度保存	是： 数据保存是按不同的浏览器分别进行保存的，也就是说，打开别的浏览器是读取不到在这个浏览器中保存的数据的	是： 数据保存是按不同的浏览器分别进行保存的，也就是说，打开别的浏览器是读取不到在这个浏览器中保存的数据的
基本使用	sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的	setItem (key, value) ——  保存数据，以键值对的方式储存信息。         getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。         removeItem (key) ——  删除单个数据，根据键值移除对应的信息。         clear () ——  删除所有的数据         key (index) —— 获取某个索引的key

使用注意

• 页面刷新不会消除数据
• 只有在当前页面打开的链接，才可以访sessionStorage的数据

例如：两个页面文件，一个是index.html，另一个是text.html，在index.html中使用sessionStorage设置后：

1）直接打开index.html页面，获取不到index.html中sessionStorage设置的值；

2）在index.html页面，添加链接跳转到text.html后，可以获取到index.html中sessionStorage设置的值；

• 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

参考：https://blog.csdn.net/fcdd123/article/details/56286106/

使用场景

        1）实际使用情况：

打开控制台可以看到各大网站都应用了 cookies 和 loacalStorage 的技术。却很少看到 sessionStorage 的身影

        2）使用 sessionStorage 进行页面传值

vue中sessionStorage.js封装与使用

1、sessionStorage.js的封装

/*
 * sessionstorage.js
 */
export default {
     getItem(key){
      let item = sessionStorage.getItem(key)
      // 这点要判断是字符串还是对象
      let result = /^[{\[].*[}\]]$/g.test(item)
      if (result) {
       return JSON.parse(item)
      } else {
       return item
      }
     },
     setItem(key, value){
      // 这点要判断是字符串还是对象
      if (typeof value == "string") {
       sessionStorage.setItem(key, value)
      } else {
       let item = JSON.stringify(value)
       sessionStorage.setItem(key, item)
      }
     },
     removeItem(key){
      sessionStorage.removeItem(key)
     },
     getAll(){},
     clear(){
      sessionStorage.clear()
     },
     key(n){},
     forEach(cb){},
     has(key){},
     deleteAllExpires(){},
     // 获取localstorage最大存储容量
     getMaxSpace(){
      if (!window.sessionStorage) {
       console.log('当前浏览器不支持sessionStorage!')
      }
      var test = '0123456789'
      var add = function (num) {
       num += num
       if (num.length == 10240) {
        test = num
        return
       }
       add(num)
      }
      add(test)
      var sum = test
      var show = setInterval(function () {
       sum += test
       try {
        window.sessionStorage.removeItem('test')
        window.sessionStorage.setItem('test', sum)
        console.log(sum.length / 1024 + 'KB')
       } catch (e) {
        console.log(sum.length / 1024 + 'KB超出最大限制')
        clearInterval(show)
       }
      }, 0.1)
     },
     // 获取使用了的localstorage的空间
     getUsedSpace(){
      if (!window.sessionStorage) {
       console.log('浏览器不支持sessionStorage')
      }
      var size = 0
      for (item in window.sessionStorage) {
       if (window.sessionStorage.hasOwnProperty(item)) {
        size += window.sessionStorage.getItem(item).length
       }
      }
      console.log('当前sessionStorage使用容量为' + (size / 1024).toFixed(2) + 'KB')
     }
    }

2、vue其他页面使用

//引用
import sessionstorage from '@src/util/sessionstorage';

//使用
sessionstorage.setItem('test1',[1,2,3,4,5,6])
sessionstorage.setItem('test2',{userId:'iiiiii',token:7788777})
sessionstorage.setItem('test3','dfdfdf')
 console.log(sessionstorage.getItem('test1'))
 console.log(sessionstorage.getItem('test2'))
 console.log(sessionstorage.getItem('test3'))