web 本地存储 (localStorage、sessionStorage,cookie)

  1. localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.clear()去清掉数据。

  2. sessionStorage(临时存储):数据保存在当前浏览器中,浏览器关闭数据也随之消失。

  3. 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)的更多相关文章

  1. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  2. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  3. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  4. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  5. web本地存储-LocalStorage

    LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  8. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  9. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

随机推荐

  1. 关于AJAX异步请求

    一个HTTP请求由4个部分组成: *HTTP请求方法或“动作” *正在请求的URL *一个可选的请求头集合,其中可能包括身份验证信息 *一个可选的请求主体 服务器返回的HTTP响应包含3部分: *一个 ...

  2. C#3.0智能的编译器

    智能的编译器 在C#3.0中,编译器变的越来越智能,我们不用提供给它完整的信息,仅需要提供必要的信息,编译器就可以进行推断为我们补全未提供的信息 自动实现的属性 在之前我们生成一个类时需要有一个字段, ...

  3. 【深度学习与TensorFlow 2.0】卷积神经网络(CNN)

    注:在很长一段时间,MNIST数据集都是机器学习界很多分类算法的benchmark.初学深度学习,在这个数据集上训练一个有效的卷积神经网络就相当于学习编程的时候打印出一行“Hello World!”. ...

  4. reStructuredText的学习

    reStructruedText的学习相比makedown语法更多一些. 需要学习的也是比较多的.我整理了下.把笔记放到readthedoc上,也是方便大家学习和理解. 预览图: reStructur ...

  5. WebGL 纹理颜色原理

    本文由云+社区发表 作者:ivweb qcyhust 导语 WebGL绘制图像时,往着色器中传入颜色信息就可以给图形绘制出相应的颜色,现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信 ...

  6. canvas API ,通俗的canvas基础知识(一)

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  7. 【转】MVC HtmlHelper用法大全

    HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了当前可用的一些 HTML 帮助器. 本主题演示所列出的带有星号 (*) 的帮助器. ActionLink - 链接到操作方法. B ...

  8. C# 设置Excel条件格式(二)

    上一篇文章中介绍了关于设置Excel条件格式,包括基于单元格值.自定义公式等应用条件格式.应用数据条条件类型格式.删除条件格式等内容.在本篇文章中将继续介绍C# 设置条件格式的方法. 要点概述: 1. ...

  9. linux系统管理--top命令

    这些日子,运维公司三台服务器,一个小伙伴貌似对top命令不太感冒,我告诉他去百度(不懂谷歌百度的程序员不是好厨师),然后突然发现也许我自己该整理一下相关的东西了 top命令是Linux下常用的性能分析 ...

  10. Java 工厂模式(一)— 简单工厂模式

    一.什么是工厂模式: Java中的工厂模式主要是用来将有大量共同接口的类实例化.工厂模式可以动态的决定将哪一个类实例化,不必事先知道要实例化哪个类,将类的实例化的主动权交给工厂而不是类本身.我们常见的 ...