前端存储 (2) - sessionStorage ,localStorage
sessionStorage ,localStorage 存储
目录
- 定义
- 生命周期
- 语法
- 存储大小
- 注意点
定义
sessionStorage ,localStorage 浏览器提供的api,
可以在当前域名下存储信息,只能存储 string
生命周期
sessionStorage 是关闭当前 tab页 就清楚了,localStorage 一直都在,关闭浏览器也会存在
语法
存储
sessionStorage.setItem(key,value);
sessionStorage.setItem("userName","王五");
获取
var result = sessionStorage.getItem(key);
清除
sessionStorage.clear();
存储大小 5Mb 左右
测试 当前浏览器存储大小 http://dev-test.nemikor.com/w...
注意点
存储的时候 value 要是 string ,不要用数组 或者 对象
数组
// 错误处理方式
sessionStorage.setItem("a",[1,2,3,4,5])
sessionStorage.getItem("a") // "1,2,3,4,5" 这样处理的话,返回成了一个 string,得自己在转换成 数组// 正确处理方式
sessionStorage.setItem("a",JSON.stringify([1,2,3,4,5]))
JSON.parse(sessionStorage.getItem("a") ) // [1,2,3,4];对象
// 错误处理方式
sessionStorage.setItem("a",{id:"134",name:"33"})
sessionStorage.getItem("a") // "[object Object]" ,返回的这种数据都没得办法处理// 正确处理方式
sessionStorage.setItem("a",JSON.stringify({id:"134",name:"33"}))
JSON.parse(sessionStorage.getItem("a") ); // {id:"134",name:"33"}
常见使用方式
sessionStorage 可以存储些用户信息,在浏览器关闭前不怎么改变的 比方下拉框
getSelectData("userType",function(data){console.log(data);});function getSelectData(key,callback){var storeMap = {};var key_url = {"user": 'api/user',"orderStatus":'api/order/status',"userType": "api/user/type"}var result = getStore(key);if(result){callback(result);return ;}$.get(key_url[key],).done(function(data){setStore(key,data);callback(data);});function setStore(key,value){sessionStorage.setItem(key,JSON.stringify(value))}function getStore(key){var result = sessionStorage.getItem(key);if(!result){return null;}return JSON.parse(result)}}
前端存储 (2) - sessionStorage ,localStorage相关推荐
- Web存储机制—sessionStorage,localStorage使用方法
基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) lo ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- java localstorage_前端存储除了 localStorage 还有啥
原标题:前端存储除了 localStorage 还有啥 来自公众号: 全栈修仙之路 前端的数据存储方式,你除了用过 Cookies.localStorage 和 sessionStorage 外,还有 ...
- 浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录 浏览器本地存储 浏览器本地存储 浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
- JavaScript 本地存储、sessionStorage和localStorage
文章目录 本地存储特性 window.sessionStorage window.localStorage 案例:记住用户名 本地存储特性 window.sessionStorage 存储数据: se ...
- Web/前端存储简述
Web/前端存储 Web/前端存储分为cookie和WebStorage: 1.cookie存储 特点:产生于服务器端,保存在客户端,同一服务器下保存的cookie数据共享,不同服务器的不共享,传输数 ...
- session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...
- sessionStorage localStorage cookie的区别
sessionStorage localStorage cookie的区别 基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码 ...
- 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...
最新文章
- AI规模化落地,英特尔至强的七重助力
- 灵魂拷问:后端业务开发要会用 K8s 到什么程度?
- ligerui layout拖动中间分隔条宽度后,重新调整两边控件的宽度
- 数据结构基础:栈(Stack)
- ​北京大学 2022 年博士研究生招生简章
- windows下的工具链 树莓派_Windows下交叉编译Qt 5.14.2至树莓派平台 QEMU模拟树莓派...
- 函数c语言桶排算法,C语言基本排序算法之桶式排序实例
- 3年前的一个小项目经验,分享给菜鸟兄弟们(公文收发小软件:前期需求调查部分)...
- 数据结构与算法笔记总结
- 使用gitpages开启个人域名博客
- Git教程、python教程、ubuntu教程 收藏
- 智慧安防体系包括哪些智能化设备?
- CodeRush For .Net 使用-------使用标签
- SVN及VSS下载脚本
- sonarqube增加阿里p3c规则扫描
- 数字电路 时序逻辑电路
- ALU计算机专业术语,计算机专业术语大全
- ChatGLM-6B 安装试用
- C语言整理(待更新)
- 幸运大转盘php逻辑判断,jQuery幸运大转盘_jQuery+PHP抽奖程序(上)