在HTML5中,本地存储
是一个window的属性,包括localStorage
和sessionStorage
,前者是一直存在本地的,后者是伴随着session存在
window.localStorage
localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
- 实例
使用 localStorage 创建一个本地存储的 name/value 对,name=“lastname” value=“Smith”, 然后检索 “lastname” 的值,并插入到 id=“result” 的元素上:
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
window.sessionStorage
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
session参考博客
- session概述
Session是由服务器端创建的,用于记录用户的状态。是指一段时间内,单个客户端与Web服务器的一连串相关的交互过程。 - session原理
- 首次使用到Session时,服务器会自动创建Session,并创建Cookie存储SessionId发送回客户端
- Session会为每一次会话分配一个Session对象
- 同一个浏览器发起的多次请求,同属于一次会话(Session)
- session作用域
Session作用域:拥有存储数据的空间,作用范围是一次会话有效- 一次会话是使用同一浏览器发送的多次请求。一旦浏览器关闭,则结束会话
- 可以将数据存入Session中,在一次会话的任意位置进行获取
- 可传递任何数据(基本数据类型、对象、集合、数组)
json.parse与json.stringify
使用 JSON.parse()
方法将数据转换为 JavaScript 对象
使用 JSON.stringify()
方法将 JavaScript 对象转换为字符串
- 实例
title: state => {let title = state.title;// 如果title为空,就获取到浏览器中存储的title值?if(title !== undefined){// JSON.parse(JSON.stringify(...))使用深拷贝 --> 不止是复制了内容,同时将指针指向也复制
// window.localStorage.setItem("title",JSON.stringify(state.title));// JSON.parse() 是将字符串中的对象解析出来// window.sessionStorage 可以将一些数据暂时存储在浏览器中,其中也有多种方法//sessionStroage.getitem(key)获取数据
//title = JSON.parse(window.sessionStorage.getItem('title'));//这里,先将数据转换为js对象,再将js对象转为字符串就可以了let titleJson = JSON.stringify(window.sessionStorage.getItem('title'));title = JSON.parse(titleJson);}return title;}