JS本地保存数据的几种方法
1.Cookie
这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便
但它的缺点也很多:
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等;
2.使用sessionStorage、localStorage
localStorage:
是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存
sessionStorage:
用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有:
1 缓存数据
2 减少对内存的占用
但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。
localStorage存储方法(sessionStorage类似)
localStorage.name =’vanida;
localStorage[“name”]=’vanida’;
localStorage.setItem(“name”,”vanida”);
//这三种设置值方式是一样的;
localStorage获取值方法
var name = localStorage[“name”]
var name= localStorage.name
var name= localStorage.getItem(“name”);
//这三种获取值方式是一样的;
localStorage清除特定值方法
//清除name的值
localStorage.removeItem(“name”);
localStorage.name=”;
localStorage清除所有值方法
localStorage.clear()
localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();
var person = {name:”vanida”,”sex”:”girl”,”age”:25};
localStorage.setItem(“person”,JSON.stringify(person));
// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}”
注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!
然后取出person的对象你可以用JSON.parse();
person = JSON.parse(localStorage.getItem(“person”));
JS本地保存数据的几种方法的更多相关文章
- 77.JS本地保存数据的几种方法
1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...
- PHP获取POST数据的几种方法汇总
一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...
- react在router中传递数据的2种方法
概述 不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用. 本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也 ...
- Asp.Net保存session的三种方法 (Dll文件更新导致session丢失的解决办法)
1. InProc模式(默认值):asp.net将session保存到当前进程中,这种方式最快,但是不能多台服务器共享session,且会话状态数据容易丢失. <sessionState mod ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- 关于Hive创建分区目录且能查到数据的三种方法
关于Hive创建分区目录且能查到数据的三种方法 1. 使用dfs -mkdir 和 dfs -put 分别创建分区目录和上传数据,此时执行msck repair table 表名 命令就能查询到数据 ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- SQLServer 批量插入数据的两种方法
SQLServer 批量插入数据的两种方法-发布:dxy 字体:[增加 减小] 类型:转载 在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Ins ...
随机推荐
- C++的虚析构
最近准备复习一遍所有的知识点,先从基础开始做起,用几分钟写个继承和析构吧. 父类为A,子类为B,代码如下: class A { public: A() { cout << "构造 ...
- web.config如何实现301跳转
.htaccess的301定向非常简单,那么web.config的301定向又应该怎么实现呢? 先来看下,web.config中的301格式 <?xml version="1.0&qu ...
- .net 流(Stream) - StreamWriter和StreamReader、BinaryReader和BinaryWriter
转自:http://www.oseye.net/user/kevin/blog/86 一.StreamWriter和StreamReader 从上一篇博文可知文件流.内存流和网络流操作的都是字节,每次 ...
- 为网页元素增加resize事件
默认只有window支持resize事件,但有时我们需要为div等元素添加resize事件 代码见下面,原理是在元素内添加一个内嵌html,然后监听这个内嵌html的resize事件 import { ...
- C#图解教程读书笔记(第4章 类:基础)
类成员包括数据成员和函数成员. 和C/C++不同,C#在类型的外部不能声明全局变量,所有的字段都属于类型,而且必须在类型声明内部声明. 和C/C++不同,方法没有返回默认类型,所有方法必须包含返回类型 ...
- MATLAB基础指令操作
由于课程实验需要学习使用了MATLAB,在此记录一下MATLAB的基本操作和命令,供参考与查阅. 学习过程中的资料也链接如下: MATLAB矩阵运算:https://wenku.baidu.com/v ...
- JAVA中commons-collections-3.2.1.jar包是干什么用的?
类似C++中的Boost库,对Java容器类型和算法的补充
- Git bash 终止git log 命令
Git bash中 可以通过键入: q ,结束该命令.
- 【转】Android开发:shape和selector和layer-list的(详细说明)
<shape>和<selector>在Android UI设计中经常用到.比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape> ...
- 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取
thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...