javascript语言各大浏览器前端存储数据的 cookie localstorage chrome拓展chrome.storageAPI

最新推荐文章于 2024-09-04 09:16:32 发布

EshareLaity

最新推荐文章于 2024-09-04 09:16:32 发布

阅读量554

点赞数

分类专栏：前端 chrome拓展文章标签： javascript浏览器数据存储问题

前端 chrome拓展专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里先附上 javascript 设置和获取cookie的方法和代码

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{

if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"") //获取到的输入值
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

以上是javascript 设置和获取cookie的方法

******************************************************************************************

这里是jquery 设置和获取cookie 的方法

定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；

下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

 
         <script type= 
         "text/javascript" 
         src= 
         "js/jquery.min.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         src= 
         "js/jquery.cookie.js" 
         ></script>

使用：

1.添加一个"会话cookie"

 
         $.cookie( 
         'the_cookie' 
         ,  
         'the_value' 
         );

这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

2.创建一个cookie并设置有效时间为 7天

 
         $.cookie( 
         'the_cookie' 
         ,  
         'the_value' 
         , { expires: 7 });

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”。注意单位是：天；

3.创建一个cookie并设置 cookie的有效路径

 
         $.cookie( 
         'the_cookie' 
         ,  
         'the_value' 
         , { expires: 7, path:  
         '/' 
          });

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

4.读取cookie

 
         $.cookie( 
         'the_cookie' 
         );

5.删除cookie

 
         $.cookie( 
         'the_cookie' 
         ,  
         null 
         );    
         //通过传递null作为cookie的值即可

6.可选参数

 
         $.cookie( 
         'the_cookie' 
         , 
         'the_value' 
         ,{ 
        
         expires:7,    
        
         path: 
         '/' 
         , 
        
         domain: 
         'jquery.com' 
         , 
        
         secure: 
         true 
        
         })

expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

以上jquery 都是转载或者复制的代码

******************************************************************

不论是javascript还是jquery 设置cookie 在火狐浏览器上有用在webkit内核浏览器却没有用

所以对于webkit内核浏览器就需要用localstorage 来实现

*******************************************

localstoraage方式

这段代码是判断你的浏览器是否支持

接下来就是操作localstorage了

 
 
  
  （浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：

  
  名称 作用
clear 清空localStorage上存储的数据
getItem 读取数据
hasOwnProperty 检查localStorage上是否保存了变量x，需要传入x
key 读取第i个数据的名字或称为键值(从0开始计数)
length localStorage存储变量的个数
propertyIsEnumerable 用来检测属性是否属于某个对象的
removeItem 删除某个具体变量
setItem 存储数据
toLocaleString 将（数组）转为本地字符串
valueOf 获取所有存储的数据

  
  清空localStorage

  
  localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

  
  存储数据
  
  localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

  
  读取数据
  
  localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
    console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

  
  删除某个变量
  
  localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

  
  检查localStorage里是否保存某个变量
  
  // 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

  
  将数组转为本地字符串
  
  var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

  
  将JSON存储到localStorage里
  
  var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}

students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

  
  说一下这个纠结的东西：简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。其实应该有个公共的变量.js放在最前面，会不会更好呢。我好像是在这样一个场景下用到的：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。不过现在想想应该有其它更好的解决方法吧。
 
 

该段转自链接：https://www.jianshu.com/p/39ba41ead42e
來源：简书
******************************************************

名称	作用
clear	清空localStorage上存储的数据
getItem	读取数据
hasOwnProperty	检查localStorage上是否保存了变量x，需要传入x
key	读取第i个数据的名字或称为键值(从0开始计数)
length	localStorage存储变量的个数
propertyIsEnumerable	用来检测属性是否属于某个对象的
removeItem	删除某个具体变量
setItem	存储数据
toLocaleString	将（数组）转为本地字符串
valueOf	获取所有存储的数据

注意了localStorage 并不能为chrome拓展提供存储数据 所以我们需要chrome拓展特别支持的API了

 
  先在插件的manifest.json赋予权限，不然是完全看不到这个api的。
 
 
  
  {
 "permissions": [
   "storage"
 ]
}

 
 
 
  试试同步数据：
chrome.storage.sync.set({'sl': "that's a boat"},function(){console.log("保存完毕");})

 
  同步和读取数据：
>chrome.storage.sync.set({'sl': "that's a boat","hi":"how r you","look":"good"},function(){console.log("保存完毕");})
undefined 
保存完毕
>chrome.storage.sync.get(["sl","hi"],function(date){console.log(date);}) //读取一组数据
undefined
Object
>chrome.storage.sync.get("sl",function(date){console.log(date);}) //读取一个数据
undefined
Object

 
  发生同步数据变动：
 
 
  
  //监控变更
chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (key in changes) {
		//提取一个改变的对象
		var storageChange = changes[key];
		console.log(' 在 "%s" 区域的存储键值【"%s"】已经发生改变. ' +
					'旧的值是 ："%s", 新的值是： "%s".',
					key,
					namespace,
					storageChange.oldValue,
					storageChange.newValue);
	  }
})

 
 
 
  只捕获想要的同步数据
 
 
  
  //监控变更
chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (key in changes) {
		//提取一个改变的对象
		if (typeof(changes.ink_config)!="undefined") //只扑捉想要的键值
		{
			localStorage=changes.ink_config; //载入本地去管它呢
		}

		console.log("服务器数据变更！已经同步！");
	  }
})

 
 
 
  取消同步数据变动监听器
 
 
  
  
   
   chrome.storage.onChanged.removeListener()
  
  
 
 
然后再文章的结尾 要特别注重一点 chrome拓展调用localstorage接口时  首先要赋予权限 然后这些代码都是在background页进行的通过conntect_javascript和background之间chrome,runtime.sendMessage()来传递消息和传递值

该文章主要是用于自己笔记记忆文章内容大多转载的如有侵权还望告知

javascript语言 各大浏览器前端存储数据的 cookie localstorage chrome拓展chrome.storageAPI

清空localStorage

存储数据

读取数据

删除某个变量

检查localStorage里是否保存某个变量

将数组转为本地字符串

将JSON存储到localStorage里

javascript语言各大浏览器前端存储数据的 cookie localstorage chrome拓展chrome.storageAPI