web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage、sessionStorage,cookie)
localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.clear()去清掉数据。
sessionStorage(临时存储):数据保存在当前浏览器中,浏览器关闭数据也随之消失。
cookie:是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON
1. 保存数据到本地
var info = {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));
2. 从本地存储获取数据
getItem(“key”):获取名称为key的值,如果key不存在则返回null
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));
3. 本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
4. 删除所有保存的数据
sessionStorage.clear();
localStorage.clear();
5. js下cookie使用方法
可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
创建cookie:
document.cookie="name=tom";<br><br>可为cookie添加一个过期时间:<br>document.cookie="name=tom; expires=Thu, 26 Dec 2017 12:00:00 GMT";
读取cookie:
var co = document.cookie; // 以字符串的方式返回所有的 cookie
删除cookie:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
删除cookie只需要将expires的值设为当前时间之前就行了,删除是不必指定cookie的值。
6. jq下cookie使用方法
使用该方法,需要先引入jQuery文件与jQuery.cookie文件
创建cookie:
$.cookie('key','value') // 注:当没有指明 cookie有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止
创建一个具有有效期的cookie:
$.cookie('name', 'value', { expires: 10 });
读取cookie:
$.cookie('name') // cookie存在,值为'value',不存在,则为null
删除cookie:
$.cookie('name',null)
浏览器查看方法
- 进入开发者工具
- 选择 Application
- 在左侧 Storage 下 查看 Local Storage 和 Session Storage

2018-07-2117:57:27
web 本地存储 (localStorage、sessionStorage)的更多相关文章
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- web本地存储localStorage和sessionStorage
用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...
- web本地存储-LocalStorage
LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
随机推荐
- C#版 - 小红书后台开发面试题: 二维数组中的查找
二维数组中的查找 热度指数:24274 时间限制:1秒 空间限制:32768K 本题知识点: 查找 在线提交网址: http://www.nowcoder.com/practice/abc3fe2 ...
- so beautiful so white
Topic Link http://ctf5.shiyanbar.com/stega/white.zip 1) 打开压缩包,接着打开图片,发现是白色的但根据提示 压缩包的密码就藏在这幅白色图片中,仔 ...
- 如何限制用户仅通过HTTPS方式访问OSS?
一.当前存在的问题 当前OSS支持用户使用HTTPS/HTTP协议访问Bucket.但由于HTTP存在安全漏洞.大型企业客户都要求使用HTTPS方式访问OSS,并且拒绝HTTP访问请求. 目前OSS可 ...
- PWA的探索与应用
本文由云+社区发表 PWA(Progressive Web App)起源背景 传统的Web网页存在以下几个问题: 进入一个页面必须要记住它的url或者加入书签,入口不便捷: 没网络就没响应,不具备离线 ...
- Java并发专题(一)认识线程
1.1 认识线程 线程是轻量级进程,也是程序执行的一个路径,每一个线程都有自己的局部变量表.程序计数器(指向正在执行的指令指针)以及各自的生命周期,现代操作系统中一般不止一个线程在运行.比如说,当我们 ...
- Python迭代和解析(4):自定义迭代器
解析.迭代和生成系列文章:https://www.cnblogs.com/f-ck-need-u/p/9832640.html 本文介绍如何自定义迭代器,涉及到类的运算符重载,包括__getitem_ ...
- Java高阶语法---final
背景:听说final Java高阶语法是挺进BAT必经之路. final: final关键字顾名思义就是最终不可改变的. 1.含义:final可以声明成员变量.方法.类和本地变量:一旦将引用声明为fi ...
- 看Android Stuido教程有感
毕业两年了,之前一直都在另外的博客里写之前大学的经历,以及转载一些学习Android的点滴,原创的并不多.因为现在更多的是在博客园里逛,所以直到上个月还是鼓起勇气开通了博客,算来到今天也有一段时间了, ...
- 记录一下这次web实训的两个网站
先是做的一个天猫的部分首页,接着过了一周左右开始做京东的一个商品详情页. 从天猫到京东,从不敢做到开始不断突破自己,从代码量的堆积中汲取经验.收获真的很大,也学习到了很多,还有很多要学的,继续加油吧~ ...
- MySQL高级特性之分区表
对于用户而言,分区表是一个独立的逻辑表,但是在底层由多个物理子表组成.实现分区的代码实际上是对一组底层表的句柄对象的封装,对分区表的请求都会通过句柄对象转化成对存储引擎的接口调用 意义 MySQL在创 ...