浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage
现阶段,浏览器提供的储存方式常用的有三种,cookie、localStorage、sessionStorage
1、cookie
概念:cookie 是浏览器中用于保存少量信息的一个对象
基本特征:
1)以域名为单位的,每个网站的cookie都保存在此网站的域名下,当下一次访问该网站的时候,就可以通过cookie访问保存的消息
2)每个浏览器保存cookie的位置不同,都保存在浏览器内部,可以通过相应的操作查看
3)每个浏览器保存cookie的数量限制不同,一般每个网站下不大于50个,不大于4k。
4)每个网站下的cookie是以分号+空格的形式串联起来的
5)一般直接保存的cookie会在浏览器退出时清空,如果要长期保存,就得设置过期时间,使用expires=Date,卸载设置的cookie后面,使用分号+空格隔开
获取cookie:通过document.cookie可以获取该域名下的所有的cookie组成的字符串,格式为名=值得形式,中间由分号+空格分开,如:“name=张三; age=23”
获取之后使用字符串操作拆分即可得到对应的值
以下是获取cookie的封装方法
//获取cookie的方法
function getCookie(cookieName){
var cookies = document.cookie.split("; ");
for(var i=0; i<cookies.length; i++){
var arr = cookies[i].split("=");
if(arr[0] == cookieName){
return arr[1];
}
}
}
设置cookie:通过document.cookie="名=值"的方式即可设置cookie,例如:document.cookie = "name=张三; expires="+new Date(2017,9);
如果要设置过期时间,就在值后面加 分号+空格+expires=过期时间对象/过期时间字符串。
以下是分装的设置cookie的方法
//设置cookie的方法
function setCookie(key,val,time){ //tiem传入保存的天数 比如说30天过期
var nowTime = new Date(); nowTime.setDate( nowTime.getDate()+time );
//时间有GMT/UTC世界时间和北京时间相差8小时,而浏览器设置的时候是按标准时间设置的,所以需要转化。
document.cookie = key+"="+ val +"; expires="+nowTime.toUTCString();
}
删除cookie相对比较简单,只需要将值清空,并且将过期时间设置为过去即可
封装的删除cookie的方法
//清除cookie,1、讲值清空,2、设置过期时间比现在还早
function deleteCookie(key){
setCookie(key,"",-1);
}
2、localStorage与sessionStorage
特点:
1)localStorage和sessionStorage都具有相同的操作方法
2)localStorage长期存放,sessionStorage浏览器关闭时清空
设置值,使用setItem:
//设置值
localStorage.setItem("name","张三");
sessionStorage.setItem("name","李四");
获取值,使用getItem
localStorage.getItem("name");
sessionStorage.getItem("name");
删除值,使用removeItem
localStorage.removeItem("name");
sessionStorage.removeItem("name");
删除所有的值,使用.clear
localStorage.clear();
sessionStorage.clear();
浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage的更多相关文章
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- Cookie localStorage sessionStorage
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...
- 浏览器本地数据存储解决方案以及cookie的坑
本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...
- 本地存储cookie,localStorage,sessionStorage
常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...
- cookie, localStorage, sessionStorage区别
cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...
- H5新特性 本地存储---cookie localStorage sessionStorage
本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...
- [JavaScript] Cookie,localStorage,sessionStorage概述
Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...
- 封装cookie localStorage sessionStorage
var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options ...
- localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...
随机推荐
- cocos2d-x-Json/XML文件
数据存储几种方式 1. 数据库 2. 文件 3. 内存 这里介绍Json格式与XML格式的文件存储 常用的文件存储数据的格式 1. Json格式 2. XML格式 Json适合存储小数据,XML适合存 ...
- [编织消息框架][消息服务]jmx
JMX(Java Management Extensions,即Java管理扩展)是一个为应用程序.设备.系统等植入管理功能的框架,使用的是RMI技术. 比较经典的应用jdk bin目录下 jcons ...
- CF #244 D. Match & Catch 后缀数组
题目链接:http://codeforces.com/problemset/problem/427/D 大意是寻找两个字符串中最短的公共子串,要求子串在两个串中都是唯一的. 造一个S#T的串,做后缀数 ...
- 一个 Vue + Node + MongoDB 博客系统
源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...
- css常用的属性方法 上篇
自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的. 背景关联 ba ...
- 基于CSS的个人网页
前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...
- MySQL AutoCommit带来的问题
现象描述 测试中发现,服务A在得到了服务B的注册用户成功response以后,开始调用查询用户信息接口,却发现无法查询出任何结果.检查binlog发现,在查询请求之前,数据库确实已经完成了commit ...
- fstream 学习
#include <fstream> 引用:http://blog.csdn.net/qiang60125/article/details/5949750(fstream 常用方法详解) ...
- java:Comparable比较器
/*Comparable 是java.lang中的一个接口,所以是默认导入的,不需要显示的导入. *如果你先直接在本类中实现排序,那么可以直接实现该接口(例如:public class Compara ...
- Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace 解决方法
这个问题是在用到spring时,本地IDE里面跑的很正常,但是打包后在集群上运行时报错. 多方查找资料后确定了问题的根源,由于在依赖中调用了spring的许多包,会存在文件覆盖的情况. 具体是 这三个 ...